Menu
If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like :
<div id="1" ></div>
<div></div>
<div></div>
And CSS :
#1 :hover < body > div
{
//Here I change the things
}
214
The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".
When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
There are three major levels of Style Sheets in CSS and one is applied first, and then another, and then another.
Use the general sibling combinator
#yourId:hover ~ div
{
color:red;
}
Also note that Id's must begin with a letter. W3 ID Attribute
Example
123
Put a wrapper around them, then put the hover on the wrapper.
<div class="wrapper">
<div class="element">foo</div>
<div class="element">bar</div>
<div class="element">baz</div>
</div>
.wrapper:hover .element {
color: red;
}
Example: http://jsfiddle.net/EB92r/
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
