0

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

4

3 回答 3

1

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

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

    function(e){ $(this).parent().prev().removeClass('productsHover') }
);
于 2013-03-18T07:00:04.357 回答
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.
于 2013-03-18T06:46:37.830 回答
0

你可以这样做：

 .entry img
 .entry:hover img

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

于 2013-03-18T06:42:07.223 回答