Question

我在父div中有2个h3元素，类为'entry'

<div class="entry">
  <h3 class="productsHover">
    <a><img src="image.png" /></a>
  </h3>
  <h3>
    <a>Drillrigs</a>
  </h3>
</div>

现在，当您将鼠标悬停在图像上时，它具有CSS定义的过渡效果：

h3.productsHover img{
    position: relative;
    margin-right: 10px !important;
    left: 0px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
h3.productsHover img:hover{
    left: 6px;
}

我不想将它们添加到应用悬停效果的同一父元素（h3.productsHover）中。它们（图像和文本）应保留在单独的h3标记

中

问题：那么当实际将鼠标悬停在h3文本元素上时，如何调用图像上的悬停效果呢？

并非我不想将悬停效果应用于整个父元素（.entry），因为它还包含许多其他图像和h3标记。

此外，类只应该通过JS添加，而不是在自己的html中添加（通常的方式）。

Answer 1

@Vimal Stan：应该通过以下方式改进这个答案：

$(".entry img").prev().addClass("hoverClass"); // of fire hover for that element
// same with this one .entry:hover img

http://api.jquery.com/prev/

 .prev( [selector ] )Returns: jQuery

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

Answer 2

将处理程序绑定到具有文本的h3上的hover（jQuery支持）事件，处理程序将在mouseenter上添加一个类并在mouseout上删除一个类。让h3上的css类有img来做效果。

$( 'div.entry h3:last-child a' ).hover(
    function(e){ $(this).parent().prev().addClass('productsHover') },

    function(e){ $(this).parent().prev().removeClass('productsHover') }
);

Answer 3

你可以这样做：

 .entry img
 .entry:hover img

这可以让你显示悬停效果，无论它悬停在div上的哪个位置。

如果满足条件，则将悬停函数添加到类中

3 个答案: