在文字或者圖片下顯示提示文字

有些時候,我們希望鼠標移到文字或者圖片上的時候,顯示一些說明文字,

以下爲實現方法,因爲我最終實現的爲在圖片上加文字,所以 顏色度 將別人的 .8==>.1

下移的位置也從 -34px==>-12px (在圖上顯示文字正好)。你也可以自己調整其它的部分。

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>實踐題 </title>
   <style type="text/css">
.tags {
    position: relative;
}


.tags:hover:after {
    background: rgba(0,0,0,.1);
    border-radius: 10px;
    bottom: -12px;
    color: #fff;
    content: attr(ishow);
    left: 10%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 350px;
}
</style>
</head>


<body>


<a class="tags" ishow="Text shown on hovering">Exposed text</a>
</body>


</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章