CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
user2209033
user2209033

Reputation:

Targeting only the image CSS on hover

I currently have this code below:

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

What I am trying to do, is when you hover over the surrounding div (Categorytiletext), ONLY the image will have the class 'hovereffect' added, which changes the opacity.

Using this script:

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

This basically adds the class to the whole div (which it is coded to do), but I ONLY need the image to have the class.

Any ideas?

EDIT:::

I will have more than 1 of these, as it is in a loop. So is there a way to ONLY tagret the current image in the CURRENT div

Upvotes: 0

Views: 551

Answers (6)

Mustaghees
Mustaghees

Reputation: 526

Ok here I have done some major editions and I hope it will work. Still, it is simple. Check this out .

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

I have used mouseover instead of hover. I guess they are the same. I did not use a real image as Im on a mobile device, you know its not convinient.

Edit:

Ok now I have updated code as you have edited the question. But still you could do it yourself if there are more divs. Here is the edited version.

Upvotes: 0

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

I think is better than you work with parent and get the child, so you should right something like this:

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

Because maybe you have some more img with imagetest class !

Upvotes: 0

connexo
connexo

Reputation: 56763

You do not even need to use Javascript or jQuery for this, this can be more easily done with css:

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

Working example:

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

Upvotes: 5

PeterKA
PeterKA

Reputation: 24638

You will need to target just the image bearing in mind that there's a context to consider, in case there are other images with the same selector:

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

Upvotes: 0

Mustaghees
Mustaghees

Reputation: 526

If you want to add class just to the image, then just target only the image. Its that simple. Your function's code will be:

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

Maybe code is working, but your styling is not. Which may happen if other style rules are getting preference. If that is the case, then add !important after your style rule's value, such as:

.hovereffect {
  opacity: 0 !important;
}

Upvotes: 0

vizidev
vizidev

Reputation: 41

I'm guessing you copied from somewhere, anyways, add correct selector for the thing you want to toggle:

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

Upvotes: 0

Related Questions