使用jQuery将鼠标hover在一个元素上并将效果应用于另一个元素

 
 
 Dots 
 
 
 
    
  

这是jquery：

  $('.views-field').hover(function() { $('h5').css('text-decoration', 'underline'); }, function() { $('h5').css('text-decoration', 'none'); }); 

以上代码产生的是对所有类项的hover效果，而不仅仅是我正在hover的项。 我试着补充一下

 $(this).parent('views-row').find('h5').css('text-dec', 'under') 

但那里没有豆子。

你可以猜到我是一个jQuery新手，我真的很欣赏正确方向的一点……

提前致谢

Answer 1

尝试：

 $('.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只返回一个元素。

摆弄： http ： //jsfiddle.net/iambriansreed/Ct39b/

Answer 2

试试$(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'); }); 

Answer 3

我认为最简单的方法是将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/

Answer 4

请参阅此处的示例

这是代码：

 
 
 
 Dots 
 
 
 
    
 
​ $('.views-row h5').hover(function() { $(this).css('text-decoration', 'underline'); }, function() { $(this).css('text-decoration', 'none'); });​ 

只需您的信息，您可以使用纯css为上述代码执行此操作，请参阅下面的代码：

 .views-row h5:hover{ text-decoration: underline; }