Visibilität wenn Aussage: Wenn css Anzeige ist nicht keine, tun

Question

Ich habe diese Javascript-Funktion und es funktioniert nicht. Keine Fehler in Klammern. Ich bin mir bewusst, dass dies auch mit Sichtbarkeit gemacht werden kann, aber in meinem Fall scheint das besser zu sein und ich möchte dabei bleiben, wenn das möglich ist.

Ich habe drei Tasten und indem jeder schwebt, wird das passende div fadeIn (.one, .zwei, .Three). Dieser Code (hier nicht gezeigt) funktioniert bereits großartig.

Jetzt möchte ich .hello zeigen, wenn alle drei divs eingeblendet sind (alias Display ist nicht 'none' mehr, als ich in der CSS-Datei geschrieben habe, weil Javascript das durch Einblenden geändert hat, oder?).

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(); 
     } 
}); 

Ist etwas falsch?

Answer 1

Ich bin mir sicher, dass es eine bessere Lösung gibt, aber es kam mir zuerst in den Sinn. Die Funktion sollte bei Änderung nicht einmal ausgeführt werden.

//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>