कृपया इस पर एक नज़र डालें संपर्क। "मेनू" पर मँडरा करके, ड्रॉप डाउन मेनू दिखाएगा, और यह विराम देता है। अब मैं मेनू को ए में बदलने की कोशिश करता हूं TD तत्व और इस के लिए एक छवि असाइन करें TD तत्व और इस छवि पर मँडराते समय, यह छवि को बदल देगा और ड्रॉप डाउन दिखाएगा। कृपया नीचे दिए गए कोड को देखें:
<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>
जब मैं छवि पर होवर करता हूं, तो छवि प्रतिस्थापित हो जाती है और ड्रॉप डाउन मेन्यू स्लाइड डाउन हो जाता है, हालांकि, मैं ड्रॉपडाउन सूची पर केवल "h hover" नहीं कर सका क्योंकि ड्रॉपडाउन मेनू तुरंत बंद हो जाता है।
उत्तर:
उत्तर № 1 के लिए 1प्रयत्न
$("#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();
});
जब आप बाहर हॉवर करते हैं तो माउसआउट ट्रिगर हो जाता हैमेनू में होवर करने के लिए छवि। तो एक आवरण पर हॉवर घटनाओं को लागू करें। यदि यह आवरण उपयुक्त नहीं है तो मेनू और उसकी छवि को लपेटने के लिए एक आवरण बनाएं और उस पर हॉवर प्रभाव लागू करें।