CODEWITHSUNDEEP
htmlcssselectorsiblings
Chris
Chris

Reputation: 3

CSS Sibling Selector Alternative

I'm trying to cause one element to change when another element is hovered. I know this can be done using the sibling selector (~) but it doesn't seem to be working. I tried to find an alternative to using the sibling selector but only found solutions in javascript which I don't know.

I think the problem may come from the fact that I'm trying to tie multiple elements to one sibling, that is to say, hovering over 3 different divs all change one div in three different ways. I don't think there's a mistake though I could be wrong, the code is here...

CSS

#internalContainer {
width:900px;
height:400px;
}
#sectionLeft {
float:left;
height:400px;
width:300px;
}
.leftInternal {
height:100px;
width:300px;
text-align:right;
}
#titleA {
font-size:11pt;
font-weight: bold;
text-transform: uppercase;
letter-spacing:1px;
position:relative;
top:40%;
transition:.2s
}
#sectionRight {
float:left;
width:568px;
height:400px;
margin-left:32px;
background-color:#f2f2f2;
}
#titleA:hover {
top:45%;
transition:.2s
}
#titleA:hover ~ #sectionRight {
background: #ccc;
}

HTML

<div id="internalContainer">
<div id="sectionLeft">
<div class="leftInternal"><div id="titleA">Title of One</div></div>
<div class="leftInternal"><div id="titleA">Title of Two</div></div>
<div class="leftInternal"><div id="titleA">Title of Three</div></div>
<div class="leftInternal"><div id="titleA">Title of Four</div></div>
</div>
<div id="sectionRight">
</div>
</div>

http://jsfiddle.net/xs7h8/

Currently nothing changes when the links are hovered but they're all set to do the same thing right now. I was going to make subclasses for titleA and connect each to the sectionRight but that didn't work either.

Upvotes: 0

Views: 1130

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

You cannot have duplicate IDs. It simply won't work. That is your problem

Also, the #titleAs are not siblings of #sectionRight so the sibling selector will not work. #sectionRight is an uncle to them and, since there is no parent selector at the moment, there is no way to select it using CSS on hover

You also don't need to repeat the transition in the hover, it is inherited from the default state

This is the closest you can get using your current setup and no javascript, applying the hover to #sectionLeft instead

Upvotes: 2

Related Questions