前两天不知道是哪位同学问的问题, 鼠标滑过一个 div 的时候, 怎么控制子集元素属性的出现和隐藏, 然后我说用用 mouseover 和 mouseout 这两个鼠标事件就行, 那如果 JS 不怎么熟悉的时候, 可以用 CSS: hover 方法来写吧.
方法:
使用 a 控制其他块的样式:
使用 a 控制 a 的子元素 b:
- .a:hover .b {
- background-color:blue;
- }
效果是这个样子的:
demo 是昨天的基础上写的:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- .alarm:hover .divright { display: block; } .alarm { position: relative;
- width: 60px; height: 60px; margin: 60px; } .alarm img { width: 60px; height:
- 60px; } .divright { position: absolute; color: white; font-size: 17px;
- background-color: red; width: 23px; height: 25px; line-height: 25px; left:
- 80%; top: -12px; text-align: center; -webkit-border-radius: 24px; border-radius:
- 24px; display: none; }
- </style>
- </head>
- <body>
- <div class="alarm">
- <img src="img/1.png" />
- <div class="divright">
- 3
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/f9be606042ee