attr()結合：after（）實現滑鼠懸停效果
阿新 • • 發佈：2019-02-18
本文章是最基本的屬性學習，鄙人不才，在開發環境中基本上用過一次
標題有點正式，如果您對此屬性感興趣，請看完文章
一 attr()：
CSS表示式 attr() 用來獲取選擇到的元素的某一HTML屬性值，並用於其樣式。它也可以用於偽元素，屬性值採用偽元素所依附的元素。是不是有點太官方了，好吧好吧意思就是定義一個CSS屬性，並且引用。
語法：
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
解釋一下
attribute-name:定義屬性的名字。
type-or-unit:屬性的單位，單位有以下幾種：（來自msn）
| 關鍵字 | 型別 | 備註 | 預設值 |
|---|---|---|---|
color |
屬性值將被解析為#xxx、#xxxxxx或關鍵字的形式，且必須為合法CSS <string> 值。字首與字尾空格將被截掉。 |
當前顏色 | |
url |
<uri> |
屬性值將被解析為可用於url()函式的字串。相對URL是根據HTML文件的路徑解析，而不是樣式檔案所在的路徑。 字首與字尾空格將被截掉。 |
URL about:invalid，表示資源不存在。 |
integer |
屬性值將被解析為CSS <integer>。若不是合法值（不是整數或超出CSS屬性規定的數字範圍），則使用預設值。字首與字尾空格將被截掉。 | 0，或該屬性允許的最小值（如果0是不合法的值）。 |
|
number |
屬性值將被解析為CSS <number>。
若不是合法值（不是數字或超出CSS屬性規定的數字範圍），則使用預設值。字首與字尾空格將被截掉。 |
0，或該屬性允許的最小值（如果0是不合法的值）。 |
|
length |
屬性值將被解析為CSS <length>，帶單位，比如 12.5em。
若不是合法值（不是長度值或超出CSS屬性規定的範圍），則使用預設值。若屬性值是一個相對長度， attr()會將其計算為絕對長度。字首與字尾空格將被截掉。 |
0，或該屬性允許的最小值（如果0是不合法的值）。 |
|
em, ex, px, remvw, vh, vmin, vmax, mm, cm, in, pt,
or pc |
屬性值將被解析為CSS |
0，或該屬性允許的最小值（如果0是不合法的值）。 |
|
angle |
屬性值將被解析為CSS <angle>，帶單位，如30.5deg。若不是合法值（不是角度值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0deg，或該屬性允許的最小值（如果0deg是不合法的值）。 |
|
deg, grad, rad |
屬性值將被解析為CSS <number>，不帶單位，如12.5)，並被解釋為帶有所規定單位的 <angle> 值。若不是合法值（不是角度值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0deg，或該屬性允許的最小值（如果0deg是不合法的值）。 |
|
time |
屬性值將被解析為CSS <time>，帶單位，如30.5ms。若不是合法值（不是時間值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0s，或該屬性允許的最小值（如果0s是不合法的值）。 |
|
s, ms |
屬性值將被解析為CSS <time>，不帶單位，如30.5，並被解釋為帶有所規定單位的 <time>值。。若不是合法值（不是時間值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0s，或該屬性允許的最小值（如果0s是不合法的值）。 |
|
frequency |
屬性值將被解析為CSS <frequency>，帶單位，如12.5kHz)。若不是合法值（不是頻率值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0Hz，或該屬性允許的最小值（如果0Hz是不合法的值）。 |
|
Hz, kHz |
屬性值將被解析為CSS <frequency>，不帶單位，如12.5)，並被解釋為帶有所規定單位的<frequency>值。若不是合法值（不是頻率值或超出CSS屬性規定的範圍），則使用預設值。字首與字尾空格將被截掉。 |
0Hz，或該屬性允許的最小值（如果0Hz是不合法的值）。 |
|
% |
屬性值將被解析為CSS <number>，不帶單位，如12.5)，並被解釋為帶有所規定單位的 <percentage>值。若不是合法值（不是數字或超出CSS屬性規定的範圍），則使用預設值。若屬性值用作長度， attr()將其計算為絕對長度。字首與字尾空格將被截掉。 |
0%，或該屬性允許的最小值（如果0%是不合法的值）。 |
fallback:用來檢測數值是否合法，意思就是attr()宣告的屬性跟引用的屬性一致，我們來看個案例
<span data-descr="我是文字的提示">提示</span>span:hover::after{
content:attr(data-descr);
}介紹了折磨多幹活，我們來看下今天的例子
正如我標題所言，此效果結合了after attr()屬性來實現的
此效果可以做一下互動提示，來看下具體程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
span {
position: relative;
text-decoration: underline;
color: #00f;
cursor: pointer;
}
span:hover::after{
content:attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
</style>
<body>
<p>下面是程式碼的實現</p>
我們有一些<span data-descr="我是文字的提示">提示</span>
</body>
</html>以上的程式碼思路就是今天我們看到的屬性，我們使用after來追加一個attr()一個效果提示，感興趣的小夥伴可以自己試試