当鼠标悬停在链接上时,改变div的颜色
问题描述:
因此,我有几个文章标签,每个链接都有一个链接,当它需要更改包含该文章内图像的div的背景时。我希望链接悬停只适用于它所在的文章,而不会影响其他文章。下面的代码似乎也是针对其他文章的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>
答
像这样的东西应该做的伎俩
$(".edgtf-pli-link").on("hover", function() {
$(this).closest('.edgtf-pl-item-inner').find('.edgtf-pli-image').css('background', 'red');
});
答
你可以做$('...').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>
答
它非常简单,你可以使用CSS悬停属性来更改背景颜色。
.edgtf-pli-link:hover {
background: green;
}
它会工作,如果这不起作用,它可能有其他类的悬停的背景属性。 然后做!important
.edgtf-pli-link:hover {
background: green !important;
}
这肯定会工作。
答
您可以通过链接元素的父找到图像
$(".edgtf-pli-link").hover(function() {
$(this).parent().find(".edgtf-pli-image").css("background", "red");
},
function(e) {
$(this).parent().find(".edgtf-pli-image").css("background", "");
})
<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>
答
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");
});
});
答
您可以选择图像的div并使用“this”为特定div添加背景色。
$(".edgtf-pli-image").on("hover", function() {
$(this).css("background", "red");
})
答
我会做这样的事情是东阳要好得多,recomended握住你的造型成通过JS CSS文件,而不是硬编码风格。
$('.box1').hover(
function(){
$(this).addClass('onOver');
},
function(){
\t $(this).removeClass('onOver');
});
.onOver{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box1">Box1</span>
所以,这基本上切换你徘徊在元素上“徘徊”类,所以你可以简单的风格,在你的CSS文件.hovered类。 最好的问候和快乐的编码!
尝试'$(this).find('。edgtf-pli-image')。css(“background”,“red”);'而不是 – Toxide82
你介意去除水平滚动条吗?这会提高可读性。 – reporter