纯css鼠标滑过弹出层

最新推荐文章于 2023-12-12 09:30:23 发布

二月兰

最新推荐文章于 2023-12-12 09:30:23 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签：鼠标 css 滑过弹出层

本文链接：https://blog.csdn.net/u010982284/article/details/12756591

版权

本文通过CSS实现了鼠标滑过列表项时，弹出相应内容的交互效果。通过设置不同的CSS样式，如相对定位、绝对定位、隐藏与显示，以及利用:hover伪类，当鼠标悬停在链接上时，显示隐藏的div元素，展示详细信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

    <style type="text/css" >
         *{margin:0; padding:0;} /*  所有元素外边距为0 内边距为0  */
         /*  body中元素字体大小为12px,字体样式为:"Times New Roman", Times, serif,背景色:#333 */
         body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;}
         /* id为main的元素上下外边距为100px,左右外边距为自动;宽度为300px  */
         #main{margin:100px auto; width:300px;}
         /* id为main的元素中无序列表列表样式为隐藏 */
         #main ul{list-style:none;}
         /* id为main的元素中的无序列表下的li块 行高为20px, 下边框的样式为1px dashed #FC0 */
         #main ul li{line-height:20px; border-bottom:1px dashed