javascript - Is this multiple hover effect possible using only CSS? - Stack Overflow

admin管理员组

文章数量:1401606

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

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

• javascript
• css
• hover
• effect

Share Improve this question Follow edited Nov 27, 2011 at 20:35 samosa asked Nov 27, 2011 at 20:24 samosasamosa 3111 silver badge44 bronze badges 4

• 1 Can you please post your HTML? – No Results Found Commented Nov 27, 2011 at 20:29
• 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 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 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 Commented Nov 27, 2011 at 21:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

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/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./50/20)
}

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

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

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/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 :)

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.

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.

本文标签： javascriptIs this multiple hover effect possible using only CSSStack Overflow