<div class="views-row">
<div>
<h5 class="product-name">
<a href="#">Dots</a>
</h5>
</div>
<div class="views-field">
<div class="field-content">
<a href="#">
<img alt="" src="#" />
</a>
</div>
</div>
这是jquery:
$('.views-field').hover(function() {
$('h5').css('text-decoration', 'underline');
}, function() {
$('h5').css('text-decoration', 'none');
});
上面的代码产生的是对所有类项的悬停效果,而不仅仅是我正在悬停的项。我试着添加
$(this).parent('views-row').find('h5').css('text-dec', 'under')
但那里没有豆子。
你可能已经猜到我是一个jQuery新手,并且真的很欣赏正确方向的一点......
提前致谢
答案 0 :(得分:3)
尝试:
$('.views-field').hover(function() {
$('h5', $(this).closest('.views-row')).css('text-decoration', 'underline');
}, function() {
$('h5', $(this).closest('.views-row')).css('text-decoration', 'none');
});
您还可以使用:$(this).parents('.views-row')
附加到该特定行,但closest
仅返回一个元素。
答案 1 :(得分:1)
尝试$(this).prev().find('h5').css('text-decoration', 'underline');
如果包含h5的div始终高于.views-field
。
$('.views-field').hover(function() {
$(this).prev().find('h5').css('text-decoration', 'underline');
}, function() {
$(this).prev().find('h5').css('text-decoration', 'none');
});
答案 2 :(得分:1)
我认为最简单的方法是将h5
范围扩展到前一个元素
$('.views-field').hover(function() {
$('h5',$(this).prev()).css('text-decoration', 'underline');
}, function() {
$('h5',$(this).prev()).css('text-decoration', 'none');
});
这是一个jsfiddle,演示:http://jsfiddle.net/v39UQ/
答案 3 :(得分:-1)
请参阅示例here
以下是代码:
<div class="views-row">
<div>
<h5 class="product-name">
<a href="#">Dots</a>
</h5>
</div>
<div class="views-field">
<div class="field-content">
<a href="#">
<img alt="" src="#" />
</a>
</div>
</div>
$('.views-row h5').hover(function() {
$(this).css('text-decoration', 'underline');
}, function() {
$(this).css('text-decoration', 'none');
});
您可以使用纯css为上述代码执行此操作 见下面的代码:
.views-row h5:hover{
text-decoration: underline;
}