如果满足条件，则向类添加悬停功能答案

【问题标题】：Add hover function to a class if condition is met如果满足条件，则向类添加悬停功能
【发布时间】：2013-03-18 15:13:17
【问题描述】：

我在父 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 中添加（正常方式）。

【问题讨论】：

标签： javascript jquery html hover

【解决方案1】：

将处理程序绑定到具有文本的 h3 上的悬停（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') }
);

【讨论】：

我看不到你的更多源代码，所以我能提供的只是编码它的线索。由于事件源和效果不是同一个元素。因此您可以： 1. 在第二个 h3 上添加悬停事件处理程序。 2.定义css以影响第一个h3。

【解决方案2】：

@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.

【讨论】：

谢谢，但不知道如何实现。你能看看小提琴吗？ jsfiddle.net/77UGU/3
我用过 jquery，但我认为你没有。

【解决方案3】：

你可以这样做：

 .entry img
 .entry:hover img

这应该让您无论悬停在 div 上的哪个位置都显示悬停效果。

【讨论】：

谢谢，但正如我在问题中所说，我知道我可以将悬停应用到整个包含父级，但是父级内部有很多图像......所以所有图像都会有当我只想要一个特定的图像（我悬停的那个）产生效果时效果......
您只需要在选择器中更具体地突出显示您想要的图像。 [.entry .productsHover img] 和 [.entry:hover .productsHover img]