CSS 悬停选择

CSS:悬停选择
1、css 语法

:hover {
    css declarations
}

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


<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 hoverdiv>

body>
html>

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

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


<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 Linka>
                <ul>
                    <li><a href="#">Link1a>li>
                    <li><a href="#">Link2a>li>  
                    <li><a href="#">Link3a>li>
                ul>
            li>
        ul>
    div>
body>
html>

你可能感兴趣的:(CSS)