所以,我有一些文章标签,每个都有一个链接,当它悬停时需要更改包含该文章中图像的div的背景。我希望链接悬停仅适用于它所在的文章而不影响其他文章。以下代码似乎也针对其他文章的div。请有人指出我正确的方向吗?非常感谢
$(".edgtf-pli-link").on("hover", function() {
$(".edgtf-pli-image").css("background", "red");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="edgtf-pl-item post-36">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="80" height="106" src="garden-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self"></a>
</div>
</article>
<article class="edgtf-pl-item post-37">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="80" height="106" src="wall-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self"></a>
</div>
</article>
答案 0 :(得分:2)
这样的事情可以解决问题
$(".edgtf-pli-link").on("hover", function() {
$(this).closest('.edgtf-pl-item-inner').find('.edgtf-pli-image').css('background', 'red');
});
答案 1 :(得分:0)
您可以$('...').hover(function { $(this) }
获取当前悬停元素,例如:
$('.edgtf-pli-link').hover(function() {
$(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red')
}, function() {
$(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none')
})
$('.edgtf-pli-link').hover(function() {
$(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red')
}, function() {
$(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="edgtf-pl-item post-36">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="80" height="106" src="garden-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self">link 1</a>
</div>
</article>
<article class="edgtf-pl-item post-37">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="80" height="106" src="wall-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self">link 2</a>
</div>
</article>
答案 2 :(得分:0)
非常简单,你可以使用css hover属性来改变背景颜色。
.edgtf-pli-link:hover {
background: green;
}
它的工作原理,如果这不起作用,可能会有其他类的重载悬停背景属性。
然后执行!important
.edgtf-pli-link:hover {
background: green !important;
}
这肯定有用。
答案 3 :(得分:0)
您可以通过link元素的父级找到图像
$(".edgtf-pli-link").hover(function() {
$(this).parent().find(".edgtf-pli-image").css("background", "red");
},
function(e) {
$(this).parent().find(".edgtf-pli-image").css("background", "");
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="edgtf-pl-item post-36">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="800" height="1060" src="garden-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self">aa</a>
</div>
</article>
<article class="edgtf-pl-item post-37">
<div class="edgtf-pl-item-inner">
<div class="edgtf-pli-image">
<img width="800" height="1060" src="wall-featured.jpg" />
</div>
<div class="edgtf-pli-text-holder">
<div class="edgtf-pli-text-wrapper">
<div class="edgtf-pli-text">
<h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4>
<p itemprop="description" class="edgtf-pli-excerpt"></p>
</div>
</div>
</div>
<a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self">aa</a>
</div>
</article>
&#13;
答案 4 :(得分:0)
CSS
.changeColor{
background-color:red;
}
JS
jQuery(function () {
jQuery(".edgtf-pli-link").hover(function () {
jQuery('.edgtf-pli-image', this).addClass("changeColor");
}, function () {
jQuery('.edgtf-pli-image', this).removeClass("changeColor");
});
});
答案 5 :(得分:0)
您可以选择图像div并使用“this”为特定div添加背景颜色。
$(".edgtf-pli-image").on("hover", function() {
$(this).css("background", "red");
})
答案 6 :(得分:0)
我会做这样的事情,因为它更好,并建议将你的样式保存到css文件中,而不是通过js硬编码样式。
$('.box1').hover(
function(){
$(this).addClass('onOver');
},
function(){
$(this).removeClass('onOver');
});
&#13;
.onOver{
background-color: red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box1">Box1</span>
&#13;
所以,这基本上可以解决“徘徊”的问题。你正在悬停的元素上的类,所以你可以简单地在你的css文件中设置.hovered类的样式。 最好的问候和快乐的编码!