Aide à la programmation, réponses aux questions / Javascript / Comportement étrange du menu déroulant CSS - javascript, jquery, html, css, menu déroulant

Comportement étrange du menu déroulant CSS - javascript, jquery, html, css, drop-down-menu

S'il vous plaît jeter un oeil à cette lien. En survolant le "menu", le menu déroulant s'affiche et se met en pause. Maintenant, j'essaye de changer le menu en un TD élément et assignez une image à cet élément TD élément et en survolant cette image, il changera d'image et affichera une liste déroulante. Veuillez vous référer au code ci-dessous:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
li.li_class{
display: block;
}

ul.dropDown{
margin:0px;
padding:0px;
}
#clickable_div {width:166px; background-color:#9c9c9c;display:block;}

#nav_menu{width:166px; height:auto; background-color:#CCC;z-index: 99999; display: none;position: absolute;}

#wrap{ width:166px;}
</style>
</head>

<body>
<table>
<tr>
<td><img src="/images/images/ori_12.png">
</td>
<td id="testable">
<div id="wrap">
<img src="/images/images/ori_14.png">
<div id="nav_menu">
<ul class="dropDown">
<li class="li_class"><img src="/images/images/ori_12.png"></li>
<li class="li_class"><img src="/images/images/ori_14.png"></li>
<li class="li_class"><img src="/images/images/ori_15.png"></li>
<li class="li_class"><img src="/images/images/ori_16.png"></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
abc
</td>
<td>
def
</td>
</tr>
</table>

</body>
<script>
$("#testable img")
.mouseenter(function () {
this.src = this.src.replace("/ori_", "/hover_");
$("#nav_menu").stop(true, true).slideDown();
})
.mouseleave(function () {
this.src = this.src.replace("/hover_", "/ori_");
$("#nav_menu").stop(true, true).slideUp();
});



$("#nav_menu li img")
.mouseover(function () {
this.src = this.src.replace("/ori_", "/hover_");
})
.mouseout(function () {
this.src = this.src.replace("/hover_", "/ori_");
});

</script>
</html>

Lorsque je survole l'image, l'image est remplacée et le menu déroulant glisse vers le bas, cependant, je ne pouvais tout simplement pas survoler l'élément de la liste déroulante alors que le menu déroulant glissait immédiatement vers le haut.

Réponses:

1 pour la réponse № 1

Essayer

 $("#testable  #wrap").mouseenter(function (e) {
var anc = $(this).children("img").get(0);
anc.src = anc.src.replace("/ori_", "/hover_");
$("#nav_menu").stop(true, true).slideDown();
}).mouseleave(function (e) {
var anc = $(this).children("img").get(0);
anc.src = anc.src.replace("/hover_", "/ori_");
$("#nav_menu").stop(true, true).slideUp();
});

Violon

mouseout est déclenché lorsque vous survolez leimage pour survoler le menu. Appliquez donc les événements de survol sur un wrapper. Si ce wrapper ne convient pas, créez un wrapper pour envelopper le menu et son image et lui appliquer un effet de survol.