js实现对元素进行解释说明_js实现一个解释说明的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/heromps/article/details/114839371

在页面进行数据展示的时候，有时候我们需要对某一概念金星解释说明，这时可以利用CSS中的hover来实现。

html结构

 <div id="planinc">
        <p id="planinc_describe" class="disnone"
            style="position: absolute;top: 35px;left: 0px; z-index: 99; background-color: white;box-shadow: 0.5px 0.5px 3px 1px; padding: 10px 20px;border-radius: 15px;">
            用来触发某一事件，实现某一事件的响应</p>
        按鈕
    </div>

须解释名词样式调整

 #planinc {
            border-radius: 3px;
            height: 30px;
            width: 90px !important;
            background-color: #348FE2;
            text-decoration: none !important;
            color: white !important;
            text-align: center;
            display: block;
            line-height: 30px;
            position: relative;
        }

解释文字样式设置

 .disnone {
            display: none;
        }
#planinc:hover #planinc_describe {
			transition: all 0.5s linear;
			display: block;
}

总体实现

<!DOCTYPE html>
<html lang="en">

<body style="background-color: grey;">
    <style>
        .disnone {
            display: none;
        }

        #planinc {
            border-radius: 3px;
            height: 30px;
            width: 90px !important;
            background-color: #348FE2;
            text-decoration: none !important;
            color: white !important;
            text-align: center;
            display: block;
            line-height: 30px;
            position: relative;
        }

        #planinc:hover #planinc_describe {
            transition: all 0.5s linear;
            display: block;
        }
    </style>
    <div id="planinc">
        <p id="planinc_describe" class="disnone"
            style="position: absolute;top: 35px;left: 0px; z-index: 99;   width: 500px; background-color: white;color:black;box-shadow: 0.5px 0.5px 3px 1px; padding: 10px 20px;border-radius: 15px;">
            用来触发某一事件，实现某一事件的响应</p>
        按鈕
    </div>
</body>

</html>