思路:对target 设置自data-msg 自定义属性
利用伪元素 content: attr(data-msg) 拿到内容
接下来就是针对伪元素进行定位以及修饰了,这里用到::before 作为箭头;
首先设置一个div,data-msg是悬停的内容
测试内容
如下是样式: .inner { position: relative; width:300px; background: #39f; } /* 主要内容/ .inner:hover::after { position: absolute; content: attr(data-msg); top: 35px; left:-6px; font-size: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #000; color: #ffffff; } / 箭头*/ .inner:hover::before { position: absolute; top:21px; left:0; content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top:7px solid transparent; border-bottom: 7px solid black; }