Grow your CSS skills. Land your dream job.

Hover div to trigger hover on img.class?

  • # April 30, 2013 at 9:57 pm

    Hey there guys!

    I’m trying on the site I’m currently building to when I’m browsing and scrolling down that the div will trigger a hove on the img.class of each featured section (which you’ll see in the link).

    For example, when I’m hovering over the h2/p title (that’s located within the div), it’ll trigger the img:hover of the icon on the right. If you hover over the image/icon, it scales.

    Any good way of approaching this? Much appreciated.

    [>>> Here is the link to the site](http://bit.ly/1027wai)

    # April 30, 2013 at 11:18 pm

    @DoPeT Personally, I would animate the icon when the user hovers over the button, but that’s up to you. Anyways, to achieve this functionality, you would make a CSS class with all the scaling and what not (to handle the transforms/animations that you’ll be using) and when the user hovers over the button, add this class to the icon. You can use JavaScript (possibly jQuery, a JavaScript library) to trigger this class change when the user hovers over the button. Here’s a pen (CodePen) I made a while back demonstrating CSS class toggles using jQuery: http://codepen.io/srig99/pen/KeswC.

    # April 30, 2013 at 11:19 pm

    That’s a much better idea man and appreciate the reply!

    However, I know there is ways to do this; But if you know any jQuery plugins, etc that’d be helpful to reference that’d be awesome! I’ve tried finding some solutions but wasn’t really close to what I was looking for.

    Thanks again!

    # April 30, 2013 at 11:21 pm

    @DoPeT I edited my reply…See if that pen helps you…If not, just let me know and I’ll make another demo for you or help you more!

    # May 1, 2013 at 11:33 am

    Thanks so much,

    So for example..

    Does this seem right? the box could be the img.earth i want to trigger the hover class to by clicking on div/class button (div.yella-button). Still trying to figure out, how I can activate the img.earth:hover class when hovering over the .yella-button div class.

    Thanks again for all the help.

    # May 1, 2013 at 4:26 pm

    @DoPeT Did you import jQuery on your website already? If not, you’ll have to do that first using the following script tag: ``.

    Then you’ll have to do the following:

    $(function() {
    var box = $('img.earth');
    var button = $('.yella-button');
    button.hover(function() {
    box.addClass('insertYourCustomAnimationClassHere');
    }, function() {
    box.removeClass('insertYourCustomAnimationClassHere')
    });
    });

    Basically, the hover method in jQuery takes two functions as it’s parameters. The first one is triggered when the mouse moves into the element and the second one is triggered when the mouse leaves the element.

    # May 2, 2013 at 3:47 pm

    Hey there @srig99, can’t explain how thankful I am for you helping me.

    Overall, I feel like I got it right, but not working..

    Does this look right?

    If, I’m right.. Box is img.earth while hovering over button, it should add class ‘img.earth:hover’ then hover off the button remove the hover back to img.earth.

    However, doesn’t seem to be achieving that effect. Is there limitations to what I can do adding a img.class:hover?

    Thanks again, kindly appreciated. This really makes me want to get into jQuery!

    # May 2, 2013 at 4:30 pm

    You’re on the right track, but you’re trying to use a pseudoclass where you should be using a plain class, and you’re defining “addClass()“ wrong. Should be something like this:

    Then, in your CSS, replace “img.earth:hover“ with “img.earth.hover“ and you’re golden.

    # May 2, 2013 at 5:18 pm

    @DoPeT Yeah, just as @JoshBlackwood stated, you can’t add pseudoclasses using jQuery. You’ll have to create a separate class with the styles you have inside the :hover pseudoclass. Then, use this new class in your jQuery selector.

    # May 3, 2013 at 2:59 pm

    Wonderful!! Thank you @JoshBlackwood and @srig99! It works perfectly and looks awesome!

    This is why I love this community, all of you guys are so kind and open to help out. It’s really wonderful.

    Thank you guys again and I hope your solutions help out anyone else looking for this.

    # May 4, 2013 at 8:25 am

    Hai guys may be ur looking for this right
    [](http://codepen.io/srig99/pen/KeswC “onhover or mouse enter bigger and aswell leves smaller”)
    $(‘.box’).on(‘mouseenter’,function(){
    $(this).addClass(‘active’);
    });
    $(‘.box’).on(‘mouseleave’,function(){
    $(this).removeClass(‘active’);
    });

    already Mr.srig99 given demo.I was edited that you can see in that.

    http://codepen.io/srig99/pen/KeswC

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".