鼠标悬停显示_悬停超链接显示-CSDN博客

本文链接：https://blog.csdn.net/lb812913059/article/details/71075852

鼠标悬停

设置页面中鼠标放在超链接上时的显示效果，并且可以在里面设置文本样式和字体大小等属性
<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>