技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 有条件的添加Hover样式

有条件的添加Hover样式

浏览:1940次  出处信息

有条件的添加Hover样式

作者:RockUX   标签:  2011-03-30

给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧:

1
2
3
4
5
6
div {
opacity: 1.0;
}
div:hover {
opacity: 0.5;
}

但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?
假设我们的HTML结构如下:

1
2
3
4
5
<section>
<div></div>
<div></div>
<div></div>
</section>

我们可以给所有的div元素添加下面的透明度降低的属性:

1
2
3
.parent:hover > div {
opacity: 0.5;
}

然后我们再特别处理那个真正hover了的div:

1
2
3
.parent:hover > div:hover {
opacity: 1.0;
}

谁在用呢?
某敏感推在他们For Mac的程序中使用了相关的技术,效果还是不错的:

实例

这个想法可以扩展到很多地方,这里是一个列表的例子,当你鼠标进入列表的时候,其余列的透明度降低,本列中也一样,只不过透明度有层层增加,视觉效果很不错。代码是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
          #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;
            }

点击这里查看Demo

注意

这个小技巧,老式的浏览器是不支持的,因为他们只有对a标签的hover特性,如果也想实现相应的效果,那么就要使用js来检测鼠标进入的事件了。[English]

建议继续学习:

  1. 改善IE6中a与a:hover的背景支持    (阅读:1972)
  2. 记一次淘宝首页奇葩的渲染问题    (阅读:1690)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1