1506737197152.gif
要實(shí)現(xiàn)的效果大概就是這樣----
思路：對(duì)target 設(shè)置自data-msg 自定義屬性
利用偽元素 content: attr(data-msg) 拿到內(nèi)容
接下來(lái)就是針對(duì)偽元素進(jìn)行定位以及修飾了，這里用到::before 作為箭頭纷跛；
首先設(shè)置一個(gè)div一疯，data-msg是懸停的內(nèi)容
<div class="inner" data-msg = "這是懸停的效果">測(cè)試內(nèi)容</div>
如下是樣式：
.inner {
position: relative;
width:300px;
background: #39f;
}
/* 主要內(nèi)容/
.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;
}
