鼠标悬停显示

来源：互联网发布：网络黄金王晨芳照片编辑：程序博客网时间：2024/06/05 02:32

鼠标悬停

设置页面中鼠标放在超链接上时的显示效果，并且可以在里面设置文本样式和字体大小等属性<div>    a:hover{        属性：属性值        color:#333;        font-size:18px;        ·····    }  <div>

鼠标悬停显示该标题的所有文字

在该a标签下添加title="该标题"<a href="javescript:void(0);" title="123456789">123456789</a>

鼠标悬停时显示被隐藏的内容（div、图片、文字等）

        <style >            .mouse-event {                width:120px;                height:50px;                background-color: skyblue;                text-align: center;                margin:20px;                cursor:pointer;     /*设置在该区域鼠标显示方式为手*/            }            .mouse-event span {                line-height:50px;            }            .show {                width:120px;                height:50px;                background:white;                border:1px solid #e6e6e6;                position:relative;  /*设置定位为相对定位，相对原位置*/                top:5px;                left:0px;           /*设置相对定位的位置*/                z-index: 9;     /*设置显示的层级*/                display:none;   /*设置静态时隐藏*/            }            .mouse-event:hover .show {   /*设置鼠标事件*/                display:block;           /*设置鼠标悬停时显示*/            }        </style>    </head><body>    <div class="mouse-event">               <span>鼠标悬停</span>        <div class="show">              <span>鼠标悬停显示</span>        </div>    </div></body>

0 0