css中hover属性的使用技巧 |
您所在的位置：网站首页 › 样式文件css中几种选择符的作用 › css中hover属性的使用技巧 |
css中hover属性的使用技巧
|
hover属性用不同的书写方式，来改变不同关系的元素样式。
元素:hover 表示聚焦后改变自己 元素:hover 元素 表示聚焦后改变其子元素 元素:hover + 元素 表示聚焦后改变其指定的“亲兄弟”（条件是该兄弟元素与其相邻）元素 元素:hover ~ 元素 表示聚焦后改变其指定的兄弟元素，两个元素相不相邻都行。 示例： .first:hover {color: white;}/* 聚焦我改变自己 */ .three:hover .three-son {font-size: 20px;}/* 聚焦我改变我的子元素 */ .two:hover+.three {color: white;}/* 聚焦我改变我相邻的兄弟元素 */ .first:hover~.four {font-weight: 900;color: palegreen;}/* 聚焦我改变不相邻的兄弟元素*/效果图示：
完整代码如下： Document .all{ background-color: orchid; width: 200px; } .all :nth-child(-n+3){ margin-bottom: 10px; } .first {color: yellow;} .two {color: red;} .three {color: black;} .three-son {color: black;} .four {color: green;} .first:hover {color: white;}/* 聚焦我改变自己 */ .three:hover .three-son {font-size: 20px;}/* 聚焦我改变我的子元素 */ .two:hover+.three {color: white;}/* 聚焦我改变我相邻的兄弟元素 */ .first:hover~.four {font-weight: 900;color: palegreen;}/* 聚焦我改变不相邻的兄弟元素 */ 改变本身，改变不相邻（~）： 我是黄字 改变相邻（+）： 我是红字 改变子元素： 我是老黑 我是小黑 我是绿字 |
【本文地址】
今日新闻 |
推荐新闻 |