Is this multiple hover effect possible using only CSS?

Question

Could someone please tell me if the hover effect depicted here is possible with just CSS? Really would like to use this for my website if I can figure it out (so far no luck).

I'm not a programmer but have used simple techniques like sprites, changing background-color, and image-swapping for a button in the past. Unfortunately though, I have no idea how to apply such changes to multiple other divs on the page while hovering over said button :(

As seen in the sample, when the user hovers over the button an image "appears"/changes above the button and the background-color of the button and also the div below the button both change.

Someone told me I could have something like the following solution for all 3 classes and then use some inline styles for the background sprites on the button and image (and also the width of the div below the button). Maybe I didn't understand them though as the hover properties didn't carry through to the child classes when I tried it...

.button, .imageAbove, .divBelow {
    background-color: #CCCCCC;
    background-position: left top;
    background-repeat: no-repeat;
    width: 160px;
    height: 40px;
}

.button:hover, .button:hover .imageAbove, .button:hover .divBelow {
    background-color: #FFFFFF;
    background-position: 0 -40px;
}

As you can see I'm struggling with this and I'm probably trying to do something that doesn't make any sense. I can find lots of tutorials on how to apply these things to just the button itself but surprisingly I haven't found anything showing me how to do what I want to do above.

If anyone out there could straighten me out it would be most appreciated!

Thanks

Should we assume that any image and text that appears when hovering over the button have the same dimensions, or can they be any dimension? — Wex
– Wex, Commented Nov 27, 2011 at 20:31
@Madmartigan will definitely post the html later today or tomorrow... didn't realize the responses would be so quick! Wow — samosa
– samosa, Commented Nov 27, 2011 at 21:05
@Wex yes please assume the images will be the same dimensions (well using sprites so they'd actually be double the size and then shifted over) — samosa
– samosa, Commented Nov 27, 2011 at 21:06

bookcasey · Accepted Answer · 2011-11-27 20:43:46Z

4

You don't need any inline styles, nor a wrapping div.

Use the adjacent sibling selector: +

a:hover + .box{}

Also, it has problems in IE 7 and below, but you can also use the general sibling selector: ~

a:hover ~ .image {}

However, you can get around the IE bug by just being more specific:

a:hover + .box + .image{}

Demo

answered Nov 27, 2011 at 20:43

bookcasey

40.9k13 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yunzen Over a year ago

This would be impossible, if the image is before the hover element because you only have general sibling selector which is for next siblings and not fdor previous siblings

bookcasey Over a year ago

I used negative margins, you could also up relative or absolute positioning to move it where you want. I guess the question is whether moving the image slightly in the markup significantly affects its meaning. I would argue it doesn't.

yunzen · Accepted Answer · 2011-11-27 20:37:19Z

1

I think you need one outer div container where the three elements should be, where you want the changes to happen, Then you need the hierarchical inheritance in css when hovering over this outer div, like this, (http://jsfiddle.net/HerrSerker/ahJHb/)

<!-- HTML -->
<div class="outer">
    <div class="inner1">
    </div>
    <div class="inner2">
    </div>
    <div class="inner3">
    </div>
</div>

/* CSS */

div.outer {
    width: 100px;
}
div.outer div.inner1 {
    height: 20px;
    width: 50px;
}

div.outer div.inner2 {
    height: 20px;
    width: 100px;
    background: yellow
}

div.outer div.inner3 {
    height: 20px;
    width: 80px;
}

div.outer:hover div.inner1 {
    background: url(http://lorempixel.com/50/20)
}

div.outer:hover div.inner2 {
    background: gray;
}

div.outer:hover div.inner3 {
    background: gray;
}

answered Nov 27, 2011 at 20:37

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

5 Comments

samosa Over a year ago

@Madmartigan will definitely post the html later today or tomorrow... was just testing out the idea and didn't realize the responses would be so quick! Wow

bookcasey Over a year ago

This is a rather clunky solution. You could just use sibling selectors and save yourself some semantically meaningless markup.

samosa Over a year ago

@Wex yes please assume the images will be the same dimensions (well using sprites so they'd actually be double the size and then shifted over).

yunzen Over a year ago

@bookcasey It is a start and maybe help that samosa knows his/her CSS better

samosa Over a year ago

@HerrSerker I agree definitely wouldn't hurt to know what I'm doing :) thanks for your input

FelipeAls · Accepted Answer · 2011-11-27 20:48:55Z

0

Though this is possible in CSS, I don't think it would be advisable to do so.

Here is a fiddle using an anchor element: http://jsfiddle.net/MS9hV/

From a technical POV, only links and form elements can be focused by default, so it's better to stick to these elements even if IE7+ and others can style whatever element being hovered. There are people that can't/don't use a mouse (and there are smartphones). A simple CSS rule is always use :focus wherever you use :hover (or think about the best way to achieve the same effect if not possible)

The main problem is: why do you want to hide content? Is it unimportant? Why would the user have to guess he must first click/hover some region of the screen? There are legit uses of this (and plenty to play with in CSS2.1 and 3 :target and alike) but you've to be careful with usability (and then accessibility). It seems to me usability is going to suffer :)

answered Nov 27, 2011 at 20:48

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

2 Comments

yunzen Over a year ago

You maybe could make elements focusable, if you use a tabindex attribute

FelipeAls Over a year ago

@HerrSerker True (and positive values are great in forms like answer pages in forums, Google homepage, etc), but it breaks a lot if you aren't fixing your code yourself :( (this is from a practical POV when working with other teams)

Purag · Accepted Answer · 2011-11-27 20:51:08Z

0

Here's what I came up with.

HTML:

<div class="wrap">
    <div class="image"></div>
    <div class="button"></div>
    <div class="caption"></div>
</div>

CSS:

    .wrap { 
height:30px;
width:200px;
margin-top:30px; }

.image {
width:200px;
height:30px;
background-color:red;
display:none;
position:absolute;
margin-top:-30px; }

.button { 
width:200px;
height:30px;
background-color:blue; }

.caption { 
width:300px;
height:30px;
background-color:green;
display:none; }

.wrap:hover > * { display:block; }

This code makes it so that you only need to hover over the .button div. This is achieved with some simple margin-top and height setting on the .wrap div.

answered Nov 27, 2011 at 20:51

Purag

17.1k4 gold badges57 silver badges78 bronze badges

Comments

Godwin · Accepted Answer · 2011-11-27 21:01:46Z

0

Unfortunately this is not achievable only using css since you have to look ahead to see if an element contains another (the pseudo selectors :contains-element or :contains used to work I think but are no longer part of css). It is quite easy however with jQuery using the '.hover' attribute and adding classes to the targets.

EDIT: @bookcasey has proven me wrong.

edited Nov 27, 2011 at 21:01

answered Nov 27, 2011 at 20:43

Godwin

9,9576 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

Is this multiple hover effect possible using only CSS?

5 Answers 5

2 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related