CSS Web page Production example: Conditional add hover style

Article Introduction: CSS Web page Production instance: Conditional add hover style.

To add a hover style to the element, it's simple, let's look at an example of transparency:

1 2 3 4 5 6

div { opacity: 1.0; } Div:hover { opacity: 0.5; }

But what if we just want to make the div display that's really hover, and let the other div blur?
Suppose our HTML structure is as follows:

1 2 3 4 5

<section> <div></div> <div></div> <div></div> </section>

We can add the following opacity attributes to all DIV elements:

1 2 3

. parent:hover > Div { opacity: 0.5; }

And then we'll deal with that really hover div:

1 2 3

. parent:hover > Div:hover { opacity: 1.0; }

Who's using it?
A sensitive push in their for Mac program using the relevant technology, the effect is good:

Instance

This idea can be extended to a number of places, here is a list of examples, when you mouse into the list, the remaining columns of transparency, the same in this column, but the transparency has layers of increase, visual effect is very good. The code is like this:

1 2 3 4 5 6 7 8 9 (15) An-i-am ) 29

<div id= "All" > <ul> <li><a href= "#" >---</a></li> <li><a href= "#" >--- </a></li> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a ></li> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a>< /li> <li><a href= "#" >---</a></li> </ul> <ul> <li><a href= "#" >--- </a></li> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a ></li> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a>< /li> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a></li> </ul> <ul> <li><a href= "#" >---</a></li> <li><a href= "#" >---</a ></li> <li><a href= "#" >---</a></li>; Li><a href= "#" >---</a></li> <li><a href= "#" >---</a></li> <li> <a href= "#" >---</a></li> <li><a href= "#" >---</a></li> </ul> </ Div>

CSS style:

1 2 3 4 5 6 7 8 9 ( 28) (a)

#all > ul {list-style:none; Float:left; width:200px; padding:0 10px 0 0; } #all a {text-decoration:none; Display:block; padding:10px; Background: #900; border-radius:20px; Color:white; Text-align:center; margin:0 0 5px 0;  -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s Ease; -o-transition:all 0.2s Ease; #all: hover a {opacity:0.2; #all: Hover ul:hover a {opacity:0.5; } #all: Hover uL:hover a:hover {opacity:1; }

Click here to view demo

Attention

This little trick, the old-fashioned browser is not supported, because they only have a label on the hover characteristics, if you want to achieve the corresponding effect, then you need to use JS to detect the mouse into the event. [中文版]

Reprint Please specify:
Author: rockux–web Front end
From: Conditional add hover style