CSS 悬停选择

最新推荐文章于 2023-11-13 15:53:02 发布

LeeSayhi

最新推荐文章于 2023-11-13 15:53:02 发布

阅读量739

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/LeeSayhi/article/details/53785005

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS：悬停选择
1、css 语法

:hover {
    css declarations
}

2、示例
2.1：将光标悬停一个span元素展现一个div元素

<!DOCTYPE html>
<html>
<head>
<style>
div {                         
    background-color: yellow;
    padding: 20px;
    display: none;
}

span:hover + div {
    display: block;
}
</style>
</head>
<body>

<span>Hover over me!</span>
<div>I will show on hover</div>

</body>
</html>

当鼠标悬停在span元素上时，会出现一个背景色为黄色的div元素，

2.2 鼠标悬停显示和隐藏“下拉菜单”

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        background: green;
    }

    div a{
        text-decoration: none;
        color: white;
        padding: 15px;
        display: inline-block;
    }

    ul {
        display: inline;
        margin: 0;
        padding: 0;
    }

    ul li:hover {
        background: #555;
    }

    ul li ul {
        display: none;
        width: 200px;
        position: absolute;
        background: #555;
    }
    ul li:hover ul{
        display: block;
    }

    ul li ul li:hover {
        background: #666;
    }
</style>
</head>
<body>
    <div>
        <ul>
            <li>
                <a href="#">Dropdown Link</a>
                <ul>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>  
                    <li><a href="#">Link3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>