：懸停：文字修飾之前沒有任何效果？

作爲標題，我使用.icon-*添加圖標。當添加的圖標到超鏈接：：懸停：文字修飾之前沒有任何效果？

<a href="#" class="icon-email icon-large">Email me!</a>

通過content屬性插入的內容示出了上懸停下劃線文字修飾。我想只爲內容禁用text-decoration前：

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: 'IcoMoon'; 
    font-style: normal; 
    speak: none; 
} 
.icon-mail:before { 
    content: "\37"; 
} 
[class^="icon-large-"]:before, [class*=" icon-large"]:before { 
    font-size: 48px; 
    line-height: 48px; 
} 
a[class^="icon-"]:before, a[class*=" icon-"]:before { 
    margin-right: 5px; 
    vertical-align: middle; 
}

我已經試過這一點，但它不工作（裝飾仍清晰可見）：

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before { 
    text-decoration: none; 
    color: white; 
}

來源

2012-07-13 gremo

你不能做到這一點與pseudoelements。你將不得不使用JS。 – Bojangles 2012-07-13 16:47:03

是的，你不能雙倍pseusoelements和pseudoclasses那樣沒有js。我會建議使用JavaScript來處理：之前，而不是處理：懸停。這是因爲：之前並不是所有瀏覽器都支持。但這只是我的2美分.. – BumbleB2na 2012-07-13 16:47:25

@ BumbleB2na至少IE8 +，FF10.0.2 +，Opera 11.61+，Safari 5.1.2+，Chrome 17 http://www.quirksmode.org/css/contents.html – gremo 2012-07-13 16:57:22

隨着the :before pseudo-element is rendered as a descendant box（更具體地說，僅僅是第一子內容禁區前）的發電元件的，它服從the same rules its normal descendant boxes do with respect to text-decoration：

的「文本 - 裝飾'後裔元素的屬性不會對祖先的裝飾有任何影響。

見這些問題的答案更多細節：

沒有解決這個......立即浮現在腦海中的唯一的選擇沒有什麼好的辦法分別是：

自動換行以自己的span元素，然後應用text-decoration到span，as shown by skip405。當然，缺點是額外的標記。

使用內聯塊的背景圖像，而不是嵌入式文本中的圖標字體與:before僞元素（我也糾正你的類選擇的不一致）：

[class^="icon-"]:before, [class*=" icon-"]:before { 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    background-size: contain; 
    content: ""; 
} 
.icon-email:before { 
    background-image: url(icon-mail.svg); 
    background-repeat: no-repeat; 
} 
.icon-large:before { 
    width: 48px; 
    height: 48px; 
} 
a[class^="icon-"]:before, a[class*=" icon-"]:before { 
    margin-right: 5px; 
    vertical-align: middle; 
}

優勢這有skip405的解決方案是你不需要修改HTML，但是假設它使用了SVG vector background images和background-size，它在IE8中將不起作用。

如果你確實需要IE8的支持，那麼你必須退回到的位圖圖像：

.icon-email:before { 
    background-image: url(icon-mail.png); 
} 
.icon-email.icon-large:before { 
    background-image: url(icon-mail-large.png); 
}

來源

2012-07-14 04:41:23 BoltClock

真的非常感謝您的時間和您的解釋。我會去尋找額外的標記解決方案。 – gremo 2012-07-14 10:32:46

一個pseudoelement選擇必須是選擇鏈中的最後一項。

您可以將樣式應用於element:hover:before但不element:before:hover。

來源

2012-07-13 16:49:18

確實......標題是錯的，問題是正確的。去解決它。 – gremo 2012-07-13 17:00:58

僅使用a標籤作爲標記嘗試了一些東西，但很可惜。一個可能的解決方法可能是將內部鏈接包裝到另一個元素中，例如span。因此你可以在這個元素上加上下劃線（而不是僞元素） - 它完全由css控制。

一個活生生的例子是在這裏：http://jsfiddle.net/skip405/fQHUH/

來源

2012-07-13 19:52:14 skip405

您可以設置高度&溢出：隱藏於：元素之前，和文字修飾不會可見：）

來源

2012-11-14 10:08:51 user123321

插入顯示：inline-block;在你的CSS。類似下面的一個：

.icon-mail:before { 
    content: "\37"; 
    display:inline-block; 
    text-decoration:none; 
}

這裏是JS FIDDLE：

http://jsfiddle.net/73p2k/18/

來源

2014-05-14 08:02:06 Pinoy2015

不幸的是在IE中無法正常工作。 – acme 2014-06-25 14:39:29

非常感謝你的這一招。永遠不會想到添加它。 – 2014-11-19 21:01:36

@acme，請參閱最新的jsfiddler以獲得IE支持。在IE9中測試http://jsfiddle.net/73p2k/18/ – Pinoy2015 2014-12-10 10:10:13

：懸停：文字修飾之前沒有任何效果？

回答

相關問題