仅在悬停时定位图像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(Categorytiletext)上时,只有图像会添加"hovereffect"类,这会改变不透明度.

使用此脚本:

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

这基本上将类添加到整个div(它被编码做),但我只需要图像来拥有类.

有任何想法吗？

编辑:::

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

Answer 1

你甚至不需要为此使用Javascript或jQuery,这可以通过css更轻松地完成:

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

工作范例:

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