css
的 hover
属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover
属性可以应用于任何元素,不仅仅是链接 。使用 hover 属性时,需要注意以下几点:
hover
属性必须放在 link
和 visited
属性之后,但在 active
属性之前,以便生效 。这是因为 css
的优先级是按照 LVHA(link-visited-hover-active)
的顺序来确定的 。- 在
IE
浏览器中,除了 a
元素之外,其他元素要使用 hover
属性,必须声明 <!DOCTYPE>
- 在触摸屏上,
hover
属性有问题,基本不可用。不同的浏览器对 hover
伪类的表现不同。可能从不会触发,或者在触摸某元素后触发了一小会儿,或者总是触发即使用户不在触摸了,直到用户触摸别的元素。因此,网页开发人员不要让任何内容只能通过悬停才能展示出来,不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
hover
属性的语法如下:
复制
下面是一些使用 hover
属性的示例:
| a:hover { |
| background-color: yellow; |
| } |
复制
- 当鼠标悬停在
p
、h1
和 a
元素上时,改变它们的背景色:
| p:hover, h1:hover, a:hover { |
| background-color: yellow; |
| } |
复制
- 为未访问、已访问、悬停和激活的链接设置不同的样式:
| |
| a:link { |
| color: green; |
| } |
| |
| |
| a:visited { |
| color: green; |
| } |
| |
| |
| a:hover { |
| color: red; |
| } |
| |
| |
| a:active { |
| color: yellow; |
| } |
复制
| a.ex1:hover, a.ex1:active { |
| color: red; |
| } |
| |
| a.ex2:hover, a.ex2:active { |
| font-size: 150%; |
| } |
复制
- 当鼠标悬停在 span 元素上时,显示一个 div 元素(类似于工具提示):
| div { |
| display: none; |
| } |
| |
| span:hover + div { |
| display: block; |
| } |
复制
| ul { |
| display: inline; |
| margin: 0; |
| padding: 0; |
| } |
| |
| ul li { |
| display: inline-block; |
| } |
| |
| ul li:hover { |
| background: #555; |
| } |
| |
| ul li:hover ul { |
| display: block; |
| } |
| |
| ul li ul { |
| position: absolute; |
| width: 200px; |
| display: none; |
| } |
| |
| ul li ul li { |
| background: #555; |
| display: block; |
| } |
| |
| ul li ul li a { |
| display:block !important; |
| } |
| |
| ul li ul li:hover { |
| background: #666; |
| } |
复制