Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Hover attribute reveal non-div element

CSS Hover attribute reveal non-div element

Problem

I want to be able to use the CSS hover element on each specific element within the div to affect each respective span element aka hovering on "something1" should reveal "text1" and so on.

Is it possible to accomplish this without adding a bunch of div's?

span {
  display: none;
 }

.something1:hover .text1 {
  display: block;
  }
Show 1 Show 2 Show 3 Show 4
Problem courtesy of: seventymeters

Solution

You could achieve this by using the CSS ~ general sibling selectors like this:

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent. - Mozilla MDN

span {
    display: none;
}
.something1:hover ~ .text1 {
    display: block;
}
Something 1 Show 1 Show 2 Show 3 Show 4

Select all span tags starting with "textx" class:

span {
    display: none;
}
.something1:hover ~ span[class*="text"] {
    display: block;
}
Something 1 Show 1 Show 2 Show 3 Show 4
Solution courtesy of: Anonymous

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Hover attribute reveal non-div element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×