CODEWITHSUNDEEP
cssimagetexthoverrollover
asparagusflavor
asparagusflavor

Reputation: 11

Making two adjacent div's rollover together if you hover over either div

I have created a DIV with two DIV's inside it; A DIV with a rollover image and A DIV below it with text and normal rollover behaviors.

They text describes the image and they are both links to the same place so I want them to both rollover together when the mouse is hovering over either one.

Can anyone tell me how I could do that with just CSS?

Much thanks!

Upvotes: 1

Views: 1412

Answers (1)

mu is too short
mu is too short

Reputation: 434815

You could put the :hover on the outer <div> and then use that to effect the rollovers on the inner <div>s. For example:

<div class="outer">
    <div class="inner-img">
    </div>
    <div class="inner-text">
        Where is pancakes house?
    </div>
</div>

And some CSS:

.outer {
    width: 200px;
    border: 1px solid #000;
}
.inner-img {
    width: 200px;
    height: 100px;
    background-image: url(http://placekitten.com/200/100);
}
.inner-text {
    width: 200px;
}
.outer:hover .inner-img {
    background-image: url(http://placekitten.com/201/100);
}
.outer:hover .inner-text {
    background-color: #dfd;
}

And an example: http://jsfiddle.net/ambiguous/3bXhA/

Upvotes: 2

Related Questions