Question

我目前有以下代码：

<div class="categorytiletext">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 nopr">
        <img class="imagetest img-responsive-100 newimgheight" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>"/>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mobilewhite">
        <div class="testdiv">
            <h5 class="captext"><?php echo $cat->name; ?></h5>
        </div>
    </div>
</div>

我想要做的是，当你将鼠标悬停在周围的div（Categorytiletext）上时，只有图像才会有类＆＃39; hovereffect＆＃39;添加，这会改变不透明度。

使用此脚本：

jQuery(".categorytiletext").hover(function(){
    jQuery('.categorytiletext').toggleClass('hovereffect');
});

这基本上将类添加到整个div（它被编码做），但我只需要图像来拥有该类。

有什么想法吗？

EDIT :::

我将拥有超过1个，因为它处于循环中。那么有一种方法只能在CURRENT div中标记当前图像

Answer 1

你甚至不需要使用Javascript或jQuery，这可以通过css更轻松地完成：

.categorytiletext:hover .imagetest { copy your .hovereffect styles here }

工作示例：

http://codepen.io/anon/pen/oXLBvv

Answer 2

我猜你是从某个地方复制的，无论如何，为你要切换的东西添加正确的选择器：

  jQuery(".categorytiletext").hover(function(){
        jQuery('.imagetest').toggleClass('hovereffect');
});

Answer 3

如果要仅为图像添加类，则只定位图像。就这么简单。您的函数代码将是：

jQuery('img.imgtest').toggleClass('hovereffect');

也许代码正在运行，但你的样式却没有。如果其他样式规则获得偏好，则可能发生这种情况如果是这种情况，请在样式规则的值之后添加！important ，例如：

.hovereffect {
  opacity: 0 !important;
}

Answer 4

如果有其他图像使用相同的选择器，您需要仅考虑图像，并考虑到需要考虑的上下文：

jQuery(".categorytiletext").hover(function(){
    jQuery('.imagetest',this).toggleClass('hovereffect');
    //OR jQuery(this).find('.imagetest').toggleClass('hovereffect');
});

Answer 5

我认为比你和父母一起工作并且得到孩子更好，所以你应该这样对待：

jQuery(".categorytiletext").on('hover', function(){
    var $this = jQuery(this);
        $this.find('img.imagetest').toggleClass('hovereffect');
});

因为您可能还有一些img imagetest类！

Answer 6

好的，我已经完成了一些主要版本，我希望它能运作。它仍然很简单。校验 this out

$('.container').mouseover(function () {
$('.image').toggleClass('hovereffect');
});

我使用鼠标悬停而不是悬停。我想他们是一样的。我没有在移动设备上使用真实图像，你知道它不方便。

修改

好了，现在我已经更新了代码，因为您编辑了问题。但是如果有更多的div，你仍然可以自己做。 Here is the edited version.

仅在悬停时定位图像CSS

6 个答案: