a标签突出显示盒子非js效果

最新推荐文章于 2022-09-21 15:08:35 发布

kuke_kuke

最新推荐文章于 2022-09-21 15:08:35 发布

阅读量436

点赞数

文章标签： css web前端

本文链接：https://blog.csdn.net/qq_33599109/article/details/77008644

版权

鼠标放在相应的标题上，显示对应的盒子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
<style>
    .box{
        width: 300px;
        height: 300px;
        position: relative;
        border: 1px solid #000;
    }

    ul li{
        list-style: none;
        float: left;
        display: block;
    }

    .box1{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 40px;
        top: 40px;
        display: none;
    }

    .box2{
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 40px;
        top: 40px;
        display: none;
    }

    ul li:first-child:hover .box1{
        display: block;     //鼠标移上对应li显示盒子
    }
    ul li:nth-child(2):hover .box2{
        display: block;
    }
</style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            点击显示1
            <div class="box1"></div>
        </li>
        <li>
            点击显示2
            <div class="box2"></div>
        </li>
    </ul> 
</div>
</body>
</html>