CSS超鏈接樣式僅鏈接

在我的網站我有超鏈接的全局CSS規則：CSS超鏈接樣式僅鏈接

a { 
    color: #1F497D; 
    text-decoration: none; 
} 

a:hover { 
    color: #FFFFFF; 
    background-color: #1F497D; 
}

這非常適用於純文本超鏈接 - 鏈接得到應用到它懸停背景顏色。

<a href="contact.html">Contact Us</a>

與其它鏈接類型然而這是造成問題，例如：

<a href="image.png"> 
    <img src="thumb.png" alt="" /> 
</a>

在上面的例子中，圖像是透明的PNG，因此由a:hover規則所施加的背景顏色可以是在懸停上看到。

有沒有什麼辦法可以調整全局CSS規則，使其僅適用於文本鏈接？我知道我可以爲這些鏈接添加一個單獨的類，但因爲有這麼多我更喜歡更簡單的解決方案。

來源

2015-06-30 GSTAR

你可以創建一個類來錨定不屬於文本標籤：

a.not-a-text:hover { 
background-color: transparent; 
}

他們在HTML：

<a class="not-a-text" href="image.png"> 
    <img src="thumb.png" alt="" /> 
</a>

來源

2015-06-30 00:23:47

你應該，因爲這將在鏈接中使用CSS類，而不是標籤使維護更容易。

.text-link { 
    color: #1f497d; 
    text-decoration: none; 
} 

.text-link:hover { 
    color: #FFFFFF; 
    background-color: #1F497D; 
} 

<a class="text-link" href="contact.html">Contact</a> 
<a class="img-link"><img src="someimage.jpg" alt="alt"></a>

來源

2015-06-30 00:24:27 user2182349

既然你問了一個「容易」的解決方案（而不是添加類），你可以使用屬性選擇器（其中a元素都有href屬性，它與png擴展名結尾）有一個應用樣式transparent背景。

事情是這樣的：

a[href$=".png"]:hover{ 
    background-color: transparent; 
}

這裏有一個小提琴（有red懸停，你可以設置爲transparent）：

http://jsfiddle.net/sb6xvztm/

來源

2015-06-30 00:25:23 Jack

-1

所以你只想要文本超鏈接有徘徊？

If so, you can simply give the the 'Contact Us' a different class name or a specific ID. 

<a href="image.png"> 
    <img src="thumb.png" alt="" /> 
</a> 

<a id = "contact" href="contact.html">Contact Us</a> 


a { 
    color: #1F497D; 
    text-decoration: none; 
} 

#contact:hover { 
    color: #FFFFFF; 
    background-color: #1F497D; 
}

來源

2015-06-30 00:27:24

如果你不反對你的站點上運行的jQuery，我建議這個簡單的解決方案：

jQuery('a').hover(function(){ 
    jQuery(this).has('img').css('background', 'none'); 
});

工作實例這裏http://jsfiddle.net/a9h9wbnv/

來源

2015-06-30 00:37:47

對於一個jQuery解決方案，我會提出一個更簡單的解決方案：'$（'a'）。has（'img'）。addClass（'has-image'）';然後添加一個css類'has-image'，它在樣式表中將'hover'的'background-color'設置爲'transparent'，而不是在'hover'內（這將會操縱每個懸停的'style'屬性，而不是隻是一次:)下面是一個例子：http://jsfiddle.net/a9h9wbnv/2/ – Jack

我肯定會使用一個新的類。然後，只需使用任何像樣的文本編輯器（如記事本++）查找和替換：

FIND：<a href="*"> <img

REPLACE：<a class="image-link" href="*"> <img

而在你的CSS：

a.image-link:hover { 
background-color: transparent; 
}

來源

2015-06-30 00:43:10 DigiDuncan

CSS超鏈接樣式僅鏈接

回答

相關問題