Hide() mit fadeIn()/fadeOut()

Question

Ich versuche eine Ein- und Ausblenden jquery. Ich habe jedoch einige Probleme.

Ich verstecke das div, wenn die Seite geladen wird, aber wenn ich den Mauszeiger darüber halte, um es einzublenden, blendet es für eine Sekunde ein und verschwindet dann. Ich muss dann schweben heraus dann schweben zurück in

Mein JQuery.

$(document).ready(function(){ 
$('#hidedsl6').hide(); 
    $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn(); 
     }, function(){ 
     $('#hidedsl6').fadeOut(); 
    }); 
    $('#showfttn10').hover(function(){ 
    }); 
    $('#showfttn15').hover(function(){ 
    }); 
    $('#showfttn25').hover(function(){ 
    }); 
    $('#showfttn50').hover(function(){ 
    }); 
}); 

Mein HTML:

<h3 class="DSLLocation" id="showdsl6">DSL 6</h3> 
<button class="btn btnblue" id="hidedsl6" type="button">Order Now!</button> 

Answer 1

Warum jQuery verwenden, wenn es kann mit CSS

.products{ 
 
    display:table; 
 
    table-layout:fixed; 
 
    width: 100%; 
 
} 
 
.option{ 
 
    display: table-cell; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 24px; 
 
    background: #C0FFEE; 
 
} 
 
.option button{ 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; height: 100%; 
 
    border: 0; 
 
    cursor: pointer; 
 
    background: #1CEA6E; 
 
    transition: 0.3s; -webkit-transition: 0.3s; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 
.option:hover button{ 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="products"> 
 

 
    <div class="option"> 
 
    <h3>DSL 6</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
    <div class="option"> 
 
    <h3>DSL 30</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
    <div class="option"> 
 
    <h3>SUPER DSL 50</h3> 
 
    <button>ORDER NOW!</button> 
 
    </div> 
 

 
</div>

Answer 2

$(document).ready(function(){ 
    $('#hidedsl6').hide(); 

     $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn();}); 


}); 

Answer 3

Gerade prevent fügen Sie den Rücken zu stoppen und her verblassen

$(document).ready(function(){ 
$('#hidedsl6').hide(); 
    $('#showdsl6').hover(function(){ 
     $('#hidedsl6').fadeIn(); 
     }, function(e){ 
     e.preventDefault(); 
     $('#hidedsl6').fadeOut(); 
    }); 
    $('#showfttn10').hover(function(){ 
    }); 
    $('#showfttn15').hover(function(){ 
    }); 
    $('#showfttn25').hover(function(){ 
    }); 
    $('#showfttn50').hover(function(){ 
    }); 
});