CODEWITHSUNDEEP
htmlcss
user3138189
user3138189

Reputation: 7

How to hover over one element and apply animation effects to a different one

There are a couple questions like this, but to make it clear, I need to hover over one element and have another element transition, not simply having it pop back and forth (for example, this).

Essentially, this is what I want: http://jsfiddle.net/jMEL7/2/ Except that it needs to transition when I'm hovering over either of the two buttons and not when I'm hovering over the image.

Iv'e tried using selectors, but that doesn't work. I wish I could just do this:

    #lb:hover {
    h {
        webkit-transform:rotate(270deg);
        transform:rotate(270deg)
    }
}

From the other posts, it seems JS is the only way. I don't know jQuery, so I'm lost.

Upvotes: 0

Views: 139

Answers (3)

4dgaurav
4dgaurav

Reputation: 11506

You can use adjacent sibling combinator (+), but only if #h is after #lb in the HTML.

#lb:hover + #b {
    // your style
}

If there are other elements between #h and #lb, you can use (~) combinator.

#lb:hover ~ #h {
    // your style
}

e.g -

#lb:hover ~ #h {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

For child and siblings selector read

Finally

#main > a:nth-child(1):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}
#main > a:nth-child(2):hover ~ a:nth-child(3) img {
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg)
}

DEMO

Upvotes: 1

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" 
     id="h" height="130px"/>

CSS

#lb {
    float:right;
    color:#6C2D58;
    font-size:40px;
    font-family:Impact;
    transition: 1s;
}
#lb:hover {
    background-color:#D88E79;
}
#h {
    transition:1s;
}
#lb:hover ~ #h {
-webkit-transform:rotate(270deg);transform:rotate(270deg);
}

Fiddle Demos

Upvotes: 0

Shoaib Chikate
Shoaib Chikate

Reputation: 8975

I placed your input tag before img tag so I can use adjacent sibling combinator(+)

<input type="button" id="lb" value="Button">
<img src="http://playrust.com/wp-content/uploads/2013/12/rust-icon-512.png" id="h" height="130px"/>

CSS code:

#lb:hover + #h {
-webkit-transform:rotate(270deg);transform:rotate(270deg);
}

JS FIDDLE

Upvotes: 1

Related Questions