可視性if文：CSS表示がない場合do

Question

私はこのJavascript機能を持っていて、動作しません。角かっこからのエラーはありません。私はこれも可視性で行うことができることを認識していますが、私の場合はこれがよりよく見えます。可能であれば、私はそれにとどまりたいと思います。

私は3つのボタンを持ち、それぞれをホバリングすることで、一致するdivはfadeIn（.one、.two、.three）になります。そのコード（ここには示されていません）はすでにうまく機能しています。

今、私は3つのdivがすべて色あせているときに表示したいと思います（JavaScriptファイルはCSSファイルに書かれているように表示されません）。

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>