Visability if statement: if css display is not none, do

Question

У меня есть эта функция Javascript, и она не работает. Не получено ошибок из скобок. Я знаю, что это также можно сделать с видимостью, но в моем случае это кажется лучше, и я хочу остаться с ним, если это возможно.

У меня есть три кнопки и, нависая каждый, соответствующий div будет fadeIn (.one, .two, .three). Этот код (не показан здесь) уже отлично работает.

Теперь я хочу показать .hello, когда все три divs затухают (иначе дисплей не «нет» больше, как я писал в файле CSS, потому что Javascript изменил это, затухая их, правильно?).

CSS:

.hello { 
    display: none; } 

Javascript:

jQuery(function() { 

    if (jQuery('.one').css('display') !== ('none') && 
     jQuery('.two').css('display') !== ('none') && 
     jQuery('.three').css('display') !== ('none')) { 

      jQuery('.hello').fadeIn(); 
     } 
}); 

Что-то не так с этим?

Answer 1

Я уверен, что есть лучшее решение, но это пришло мне в голову. Функция должна выполняться с изменением не один раз.

//you did this part already. 
 
$("#1st").hover(function(){ 
 
    $(".one").fadeIn(); 
 
}); 
 
$("#2nd").hover(function(){ 
 
    $(".two").fadeIn(); 
 
}); 
 
$("#3rd").hover(function(){ 
 
    $(".three").fadeIn(); 
 
}); 
 

 
//checks when hover 
 
$("#1st,#2nd,#3rd").hover(function(){ 
 
    // same code 
 
    if (jQuery('.one').css('display') !== ('none') && 
 
     jQuery('.two').css('display') !== ('none') && 
 
     jQuery('.three').css('display') !== ('none')) { 
 
      jQuery('.hello').fadeIn(); 
 
     } 
 
})

.one,.two,.three,.hello{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="1st" value="1"> 
 
<input type="button" id="2nd" value="2"> 
 
<input type="button" id="3rd" value="3"> 
 
<br><br> 
 
<div class="one">1.content</div> 
 
<div class="two">2.content</div> 
 
<div class="three">3.content</div> 
 
<br><br> 
 
<div class="hello">Hello!</div>