hover显示对应文字内容
需求
需要在div,hover的时候显示指定文字内容
一开始写的
<div class="agg-item border-gray-hover"></div>
.agg-item:hover:after {
position: absolute;
color: #000;
background-color: #fff;
border: 1px solid #000;
//content: attr(title); //可显示div对应属性的内容
content: '包含端口GI35,Gi36';
z-index: 2;
width: max-content;
top: 20px;
height: 20px;
line-height: 20px;
}
大意了,后来发现有个直接又简单的方法
div的title属性:对div或其它标签设置title属性,作用是当鼠标经过悬停与div或改对象时候显示提示内容,就像对a标签设置title属性相同道理。
在对应的div上加title即可
<div class="agg-item border-gray-hover" title="包含端口GI35,Gi36"></div>