如何使用CSScontent的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司長(zhǎng)期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為當(dāng)涂企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站，當(dāng)涂網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

需要那么大的插件庫(kù)，其實(shí)就一兩個(gè)地方需要做一些提示（tooltip），所以可以使用CSS的content屬性與 :before 及 :after 偽元素配合使用來實(shí)現(xiàn)插入生成內(nèi)容。

查看效果如下

html代碼如下

<a class="dui-tips" data-tooltip="我是一個(gè)3cbest.com提示">w3cbest.com</a>

“data-“為自定義屬性，如上自定義提示data-tooltip=”我是一個(gè)3cbest.com提示”，配合before、after使用content的attr調(diào)用自定義提示，content: attr(data-tooltip);

content: attr很好理解，只要會(huì)jq的.attr()就知道什么意思了，本例的content: attr就是獲取data-tooltip里面的值

CSS代碼

.dui-tips {
position: relative;
display: inline-block;
cursor: pointer;
}
 
.dui-tips[data-tooltip]:after,
.dui-tips[data-tooltip]:before {
visibility: hidden;
position: absolute;
top: 50%;
left: 100%;
transition: all .3s;
}
 
.dui-tips[data-tooltip]:after {
 
content: attr(data-tooltip);
transform: translate(-5px, -50%);
white-space: pre;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0);
}
 
.dui-tips[data-tooltip]:before {
content: '';
height: 0;
width: 0;
transform: translate(-10px, -50%);
border-width: 5px 5px 5px 0;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0) transparent transparent;
}
.dui-tips:hover:after,.dui-tips:hover:before {
transition: all .3s;
visibility: visible;
 
}
.dui-tips:hover:after {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.8);
transform: translate(5px, -50%);
}
 
.dui-tips:hover:before {
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
transform: translate(0px, -50%);
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：如何使用CSScontent的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article10/cedgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)