hover伪类的用法:鼠标滑过导航,背景颜色改变

作者: AG亚游集团 分类: 媒体专栏 发布时间: 2018-01-04

在网站设计当中,很多时候会遇到需要鼠标滑过导航,背景颜色改变。实现的方法其实有好几种,本文主要讲运用css伪类来实现。

 
网站导航设计:
 
<li><a>首页</a></li>
 
<li><a>新闻</a></li>
 
要求,当鼠标滑过li标签,背景颜色改变。 
 
实现方法1:
 
li a{display:block;backgroud:#39c;}

li a:hover{backgroud:#efc;} 
 
实现原理:将a标签转化为块元素,通过a:hover达到滑过li的效果,这是目前最常用最简单的方法。 
 
实现方法2: 
 
hover可以直接用到各个元素,所以可以对li元素上运用伪类实现。 
 
鼠标放在li上,li变色。 
 
li{background:#000}

li:hover{background:red} 
 
示例1:

如鼠标在P上,P变颜色:

div p{background:#000}

div p:hover{background:red} 
 
示例2:

如果鼠标在div上,P变颜色:

div p{background:#000}

div:hover p{background:red} 
 
示例3:
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
        margin: 100px;
    }
    
    li {
        height: 100px;
        width: 100px;
        background: #000;
        font-size: 12px;
        color: #fff;
        position: relative;
    }
    
    li span {
        display: none;
    }
    
    li:hover span {
        display: block;
        text-decoration: none;
        width: 100px;
        height: 100px;
        background: #c00;
        position: absolute;
        top: 50px;
        left: 50px;
        color: #fff;
    }
    </style>
</head>
<body>
    <ul>
        <li>鼠标移过来触发我吧!<span>出现了!</span></li>
    </ul>
</body>
</html>

本页标签: 伪类



如果觉得本文对您有用,请您任意打赏。博主QQ/微信:468161447