仅将鼠标悬停在图像CSS上

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（类别文本）上时，仅​​图像会添加“ hovereffect”类，从而改变了不透明度。

使用此脚本：

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

这基本上是将类添加到整个div（通过编码来完成），但是我只需要图像具有该类即可。

有任何想法吗？

编辑：：：

我将有一个以上的循环，因为它是循环的。 那么有没有办法只将当前图像标记在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');
});

因为也许您还有imagetest类更多的img ！

Answer 6

好的，在这里我已经做了一些主要的版本，希望它能起作用。 不过，这很简单。 检查一下 。

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

我使用mouseover而不是hover 。 我想他们是一样的。 我没有在移动设备上使用像Im那样的真实图像，您知道它并不方便。

编辑：

好的，现在，当您编辑问题时，我已经更新了代码。 但是，如果还有更多的div，您仍然可以自己做。 这是编辑后的版本。