JQuery Nascondi / Mostra con terminale al passaggio del mouse - jquery

Voglio mostrare qualche elemento al passaggio del mouse e nasconderlo sul mouseleave. So che è un problema comune e di solito è fatto da qualcosa del genere:

jQuery(".show_it").hover(
function () {
jQuery(".my_text").show();
},
function () {
jQuery(".my_text").hide();
}
);

Ma in questo modo elemento.my_text lampeggia su quell'azione (cambi rapidi tra display: none e block) anche se ho il cursore del mouse nella posizione di riposo. Element .show_it ha larghezza e altezza di 30px e inoltre ho provato a impostare un valore elevato di z-index ma non ha avuto alcun effetto. Qualcuno pensa dove è un problema?

risposte:

Dovrebbe funzionare bene così nel tuo HTML:

<div class="show_it">Hover over this</div>

<div class="my_text" style="display:none;">And then this will show up</div>

E poi con questa javascript:

$(".show_it").hover(
function() { $(".my_text").show(); },
function() { $(".my_text").hide(); }
);

Ecco un JSFiddle questo dimostra che funziona

   $(document).ready(function() {

$(".show_it").on("mouseenter", function() {
$(".my_text").show();
}).on("mouseleave", function() {
$(".my_text").hide();
});

});

Usa il mouseenter e mouseleave invece i metodi jQuery