純css來實現提示框

用js用多了，就疏忽了最基本的css了---用title屬性來實現提示框。下面言歸正傳------如何用css實現提示框：

1、利用title屬性來實現滑鼠滑過某個元素時，實現提示整段內容的功能（利用title屬性時，提示框的樣式是預設的，而利用自定義的data-title屬性時，提示框的樣式和位置自己可以隨意定義），

首先，要將滑鼠需要懸浮的元素相對定位,

再次，利用hover和偽類的絕對定位來顯示提示的內容

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>提示框
title
>
6<
style
>
7#box89
/*首先，要將滑鼠需要懸浮的元素相對定位
*/10
#con2
1112
/*再次，利用偽類的絕對定位來顯示提示的內容
*/13
#con2:hover:after
24style
>
25head
>
26<
body
>
27<
div 
id="box"
>
28<
div 
id="con"
title
="這是乙個測試，這是乙個測試，這是乙個測試"
>這是乙個測是...
div>
2930
31<
div 
id="con2"
data-title
="這是第二個測試，這是第二個測試，這是第二個測試"
>這是第二個...
div>
32div
>
3334
body
>
35html
>

效果圖如下

兩者的對比，第乙個圖是利用自己定義的data-title屬性，提示框的樣式可以自己定義

第二個圖是利用title實行，提示框的樣式是預設的。兩者各有好處。

純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 用法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech b...

純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 使用方法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech...

純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 用法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech b...