CODEWITHSUNDEEP
htmlcsshover
snookian
snookian

Reputation: 873

CSS On Hover change div before it and after it

I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.

What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.

Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.

I just realized that I changed a few things before asking the question and it doesn't actually work with the + either

I have added a fiddle here: http://jsfiddle.net/LzLyK/1/

Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green

HTML

<div class="services-section-holder">
    <a href="#"><div class="services-section-img"></div></a>
    <div class="services-section-title"><p><a href="#">Exhibition</a></p></div>
</div>

CSS

.services-section-holder{
    position:relative;
    width:270px;
    height:70px;
    margin-bottom:5px;
}
.services-section-img{
    position:relative;
    width:80px;
    height:75px;
    float:left;
    background:url(../images/greycircle.jpg);
}
.services-section-title{
    position:relative;
    float:left;
    height:75px;
    margin: 0 auto;
    display: table;
    padding-left:20px;
}
.services-section-title a {
    text-decoration:none;
}
.services-section-title a {
    color:#000;
}
.services-section-title a:hover {
    color:#906;
}
.services-section-img:hover {
    background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
    color:#906;
}

Upvotes: 0

Views: 1599

Answers (1)

SW4
SW4

Reputation: 71150

The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.

Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a

Demo Fiddle

Example fiddle of working solution/logic vs your current code

Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.

Upvotes: 1

Related Questions