我正在制作一个网站,其中使用了 jquery 的悬停功能。 我在我网站的 5 个地方使用了悬停功能。但是,当我将鼠标悬停在其中任何一个上时,除了最后一个之外,没有显示主标题。
在这张图片中,我将鼠标悬停在一个 div 上,但我无法看到我想向所有人展示的主标题。在这些图像中类似:-
现在在第 5 张图片中,显示了主标题:-
请帮助说明为什么会这样。
而且我还想知道我应该怎么做,以便当我将光标放在当悬停以单击其上的链接时显示的栏上时。
代码:-
<a href="" id="men" class="h">MEN</a></h4>
<a href="" id="women" class="h">WOMEN</a></h4>
<a href="" class="h" id="kids">KIDS</a></h4>
<a href="" class="h" id="homeliving">HOME & LIVING</a></h4>
<a href="" class="h" id="offers">OFFERS</a></h4>
</div>
<div class="items hidden">
<p id="topwear" class="hidden">MEN</p>
<p class="para hidden"><a href="">T-Shirts</a></p>
<p class="para hidden"><a href="">Casual shirts</a></p>
<p class="para hidden"><a href="">Formal shirts</a></p>
<p class="para hidden"><a href="">Sweat shirts</a></p>
<p class="para hidden"><a href="">Sweaters</a></p>
<p class="para hidden"><a href="">Jackets</a></p>
</div>
<div class="items hidden">
<p id="indian" class="hidden">WOMEN</p>
<p class="para hidden"><a href="">T-Shirts</a></p>
<p class="para hidden"><a href="">Casual shirts</a></p>
<p class="para hidden"><a href="">Formal shirts</a></p>
<p class="para hidden"><a href="">Sweat shirts</a></p>
<p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
<p id="boys" class="hidden">KIDS</p>
<p class="para hidden"><a href="">T-Shirts</a></p>
<p class="para hidden"><a href="">Casual shirts</a></p>
<p class="para hidden"><a href="">Formal shirts</a></p>
<p class="para hidden"><a href="">Sweat shirts</a></p>
<p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
<p id="bed" class="hidden">HOME & LIVING</p>
<p class="para hidden"><a href="">T-Shirts</a></p>
<p class="para hidden"><a href="">Casual shirts</a></p>
<p class="para hidden"><a href="">Formal shirts</a></p>
<p class="para hidden"><a href="">Sweat shirts</a></p>
<p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
<p id="kurta" class="hidden">OFFERS</p>
<p class="para hidden"><a href="">T-Shirts</a></p>
<p class="para hidden"><a href="">Casual shirts</a></p>
<p class="para hidden"><a href="">Formal shirts</a></p>
<p class="para hidden"><a href="">Sweat shirts</a></p>
<p class="para hidden"><a href="">Sweaters</a></p>
</div><script type="text/javascript">
$("#men").hover(function() {
$(".items").toggleClass("hidden");
$("#topwear").toggleClass("hidden");
$(".para").toggleClass("hidden");
});
$("#women").hover(function() {
$(".items").toggleClass("hidden");
$("#indian").toggleClass("hidden");
$(".para").toggleClass("hidden");
});
$("#kids").hover(function() {
$(".items").toggleClass("hidden");
$("#boys").toggleClass("hidden");
$(".para").toggleClass("hidden");
});
$("#homeliving").hover(function() {
$(".items").toggleClass("hidden");
$("#bed").toggleClass("hidden");
$(".para").toggleClass("hidden");
});
$("#offers").hover(function() {
$(".items").toggleClass("hidden");
$("#kurta").toggleClass("hidden");
$(".para").toggleClass("hidden");
});
</script>
答案 0 :(得分:1)
我改变了 html 和 jquery,请试试这个。
您可以从here
查看<div>
<a href="" id="men" class="h menu_link">MEN</a>
<a href="" id="women" class="h menu_link">WOMEN</a>
<a href="" class="h menu_link" id="kids">KIDS</a>
<a href="" class="h menu_link" id="homeliving">HOME & LIVING</a>
<a href="" class="h menu_link" id="offers">OFFERS</a>
</div>
<div class="items hidden" data-target_id="men">
<p id="topwear">MEN</p>
<p class="para"><a href="">T-Shirts</a></p>
<p class="para"><a href="">Casual shirts</a></p>
<p class="para"><a href="">Formal shirts</a></p>
<p class="para"><a href="">Sweat shirts</a></p>
<p class="para"><a href="">Sweaters</a></p>
<p class="para"><a href="">Jackets</a></p>
</div>
<div class="items hidden" data-target_id="women">
<p id="indian">WOMEN</p>
<p class="para"><a href="">T-Shirts</a></p>
<p class="para"><a href="">Casual shirts</a></p>
<p class="para"><a href="">Formal shirts</a></p>
<p class="para"><a href="">Sweat shirts</a></p>
<p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="kids">
<p id="boys">KIDS</p>
<p class="para"><a href="">T-Shirts</a></p>
<p class="para"><a href="">Casual shirts</a></p>
<p class="para"><a href="">Formal shirts</a></p>
<p class="para"><a href="">Sweat shirts</a></p>
<p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="homeliving">
<p id="bed">HOME & LIVING</p>
<p class="para"><a href="">T-Shirts</a></p>
<p class="para"><a href="">Casual shirts</a></p>
<p class="para"><a href="">Formal shirts</a></p>
<p class="para"><a href="">Sweat shirts</a></p>
<p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="offers">
<p id="kurta">OFFERS</p>
<p class="para"><a href="">T-Shirts</a></p>
<p class="para"><a href="">Casual shirts</a></p>
<p class="para"><a href="">Formal shirts</a></p>
<p class="para"><a href="">Sweat shirts</a></p>
<p class="para"><a href="">Sweaters</a></p>
</div>
<script type="text/javascript">
$(".menu_link").hover(function() {
target_id = $(this).attr('id')
$('.items:not([data-target_id="' + target_id + '"])').addClass('hidden')
$('.items[data-target_id="' + target_id + '"]').removeClass('hidden')
})
$("body").hover(function(e) {
var menu_contain = $(".items");
if (!menu_contain.is(e.target) && menu_contain.has(e.target).length === 1) {
$('.items').addClass('hidden')
}
})
</script>