CODEWITHSUNDEEP
javascriptcsshovereffect
samosa
samosa

Reputation: 31

Is this multiple hover effect possible using only CSS?

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

Upvotes: 3

Views: 4580

Answers (5)

Godwin
Godwin

Reputation: 9937

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.

Upvotes: 0

Purag
Purag

Reputation: 17071

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.

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

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

Upvotes: 0

bookcasey
bookcasey

Reputation: 40501

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

Upvotes: 4

yunzen
yunzen

Reputation: 33439

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;
}

Upvotes: 1

Related Questions