CSS 悬停选择

来源：互联网发布：js分割字符串成数组编辑：程序博客网时间：2024/05/22 15:05

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>

0 0