CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
ariel
ariel

Reputation: 3072

How do I make div elements hover in reverse?

First, let's review my code:

HTML:

<div class="button_container">
    <div class="inner_button">
        <a href="#" class="button_text">Button</a>
    </div>
    <div class="button_side">
        <i class="play" />
    </div>
</div>

CSS:

.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

The above code will let .button_side hover if .button_container is hovered. But now I also want to do the reverse, so that if .button_side is hovered it will hover .button_container. I believe with CSS it will be difficult but I would prefer it but I am open to something in JQuery. How can I do this?

Upvotes: 1

Views: 304

Answers (3)

t.niese
t.niese

Reputation: 40872

This is not exactly what you are asking but probably helpful.

Sometimes is a suitable solution if you don't want to mess around with js to much. On the other side it makes your html and css code messy. I rarely use this in some special situations (e.g. for having a hover effect for column views where the column can have a height of 100% because it should expand the row).

It does not work for older IE versions so if it is used it should be used with caution.

HTML

 <div class="button_container">
     <div class="inner_button">
         <a href="#" class="button_text">Button</a>
     </div>
     <div class="button_side">
         <i class="play">play</i>
         <div class="hover-fake"><div>
     </div>
 </div>

CSS

.hover-fake {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: green;
    display: none;
}

.button_container {
    position: relative;
    left: 0xp;
    top: 0px;
}

.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

.button_side:hover > .hover-fake  {
    display: block;
}

JSFiddle

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

"I also want to do the reverse, so that if .button_side is hovered it will hover .button_container"

I believe you are correct about needing to use JS for this (easy with some jQuery), because CSS tends to work from parents to children, not the other way around. First define a class to add with the desired setting(s):

.hover {
    background : red;
}

And then:

$(".button_side").mouseenter(function() {
    $(this).closest(".button_container").addClass("hover");
}).mouseleave(function() {
    $(this).closest(".button_container").removeClass("hover");
});

Demo: http://jsfiddle.net/PxQCT/

Within a jQuery event handler, this (usually) refers to the element that the event applied to, so $(this) gives you a jQuery wrapper to the hovered item and lets you use jQuery's .closest() method to find the nearest ancestor with the .button_container class.

Note that the JS code that I've shown would need to be included in a script element that appears after the elements in question, and/or in a document ready handler.

EDIT / P.S.: Note that in your markup as shown in the question the .button_side element doesn't actually have any hoverable content, just an empty (self-closing) <i> element (so in my demo I added some content there so that you could have something to hover over and see it working).

Upvotes: 4

Paladini
Paladini

Reputation: 4572

I think you can do something like this (with jQuery):

$(document).ready(function(){

    $('.button_side').hover(function(){
        $('.button_container').addClass('hover');        
    }, function(){
        $('.button_container').removeClass('hover');
    });

});

If you need some help, try to see this jsfiddle.

Upvotes: 0

Related Questions