CSS如何使用:hover选择器?代码示例

2021年3月19日13:59:12 发表评论 727 次浏览

鼠标悬停在元素上时, 该选择器用于设置元素的样式。它可以在每个元素上使用。

语法如下:

element :hover{
CSS declarations;
}

示例1:在将鼠标悬停在元素上时更改背景颜色。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h1:hover {
             color: white;
             background-color: green;
         }
     </ style >
</ head >
  
< body >
  
     < h1 align = "center" > hover it</ h1 >
  
</ body >
  
</ html >

输出如下:

初始:

CSS如何使用:hover选择器1

悬停时:

CSS如何使用:hover选择器2

示例2:在将鼠标悬停在文本上方时显示隐藏的块。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         ul {
             display: none;
         }
          
         div {
             background: green;
             width: 200px;
             height: 200px;
             padding: 20px;
             padding-left: 50px;
             font-size: 30px;
             color: white;
             display: none;
         }
          
         h3:hover + div {
             display: block;
         }
     </ style >
</ head >
  
< body >
  
     < h3 align = "center" >
Hover to see hidden lsbin.
</ h3 >
     < div >
         lsbin
     </ div >
  
</ body >
  
</ html >

输出如下:

初始:

CSS如何使用:hover选择器3

悬停时:

CSS如何使用:hover选择器4

示例3:在将鼠标悬停在元素上时更改字体颜色。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h1:hover {
             color: red;
         }
     </ style >
</ head >
  
< body >
  
     < h1 align = "center" > hover it</ h1 >
  
</ body >
  
</ html >

输出如下:

初始:

CSS如何使用:hover选择器5

悬停时:

CSS如何使用:hover选择器6

范例4:悬停在其上方时更改文本的字体系列。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h1:hover {
             font-family: monospace;
         }
     </ style >
</ head >
  
< body >
  
     < h1 align = "center" > hover it</ h1 >
  
</ body >
  
</ html >

输出如下:

初始:

CSS如何使用:hover选择器7

悬停时:

CSS如何使用:hover选择器8

示例5:将文本装饰更改为将鼠标悬停在元素上时下划线。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h1:hover {
             text-decoration: underline;
         }
     </ style >
</ head >
  
< body >
  
     < h1 align = "center" > hover it</ h1 >
  
</ body >
  
</ html >

输出如下:

初始:

CSS如何使用:hover选择器9

悬停时:

CSS如何使用:hover选择器10

浏览器支持

  • 谷歌浏览器4.0
  • Internet Explorer 7.0
  • Mozila Firefox 2.0
  • Safari 3.1
  • 歌剧9.6

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: