<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
display: inline-block;
background: red;
width: 300px;
height: 250px;
}
li{
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
}
.box{
width: 400px;
height: 150px;
background: yellow;
margin-left: 300px;
margin-top: -50px;
display: none;
}
li:hover{
background: pink;
}
li:hover .box{
css实现鼠标悬停时滑出层
最新推荐文章于 2021-11-15 23:04:33 发布
本文展示了如何使用CSS实现当鼠标悬停在列表项上时,一个黄色背景的层从侧边栏滑出的效果。通过设置display属性在hover状态下切换,实现了简洁的交互体验。
摘要由CSDN通过智能技术生成