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 exa

Solution 1:

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

Solution 2:

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

<inputtype="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

Solution 3:

HTML

---

<inputtype="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

---

• Working Fiddle
• Full Page Demo