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

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

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

语法如下：

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 >

输出如下：

初始：

悬停时：

示例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 >

输出如下：

初始：

悬停时：

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

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

输出如下：

初始：

悬停时：

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

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

输出如下：

初始：

悬停时：

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

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

输出如下：

初始：