gpt4 book ai didi

javascript - jQuery mouseenter 未找到并将 addClass 应用于正确的数据属性 div

转载 作者:行者123 更新时间:2023-12-03 02:00:40 25 4
gpt4 key购买 nike

我有一个像这样的 HTML 结构

<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>

primary-nav li a悬停时,jQuery 是用适当的 data-motion 滑动图像悬停的属性 #primary-nav li .

function mpSlide() {

$("#primary-nav li a").on("mouseenter", function () {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).on('mouseleave', function () {
$("#feature-images .image-field ul li").removeClass("is-open");
});

}

我的控制台没有给出错误或警告。我不确定我在这里做了什么。

最佳答案

您可以使用 mouseovermouseout 来实现此目的,因此您还需要从选择中删除 a 因为它没有data-rel 属性。

$("#primary-nav li").mouseover(function() {  
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
$("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>

关于javascript - jQuery mouseenter 未找到并将 addClass 应用于正确的数据属性 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50049464/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com