懸停效果只對其元素

-1

+----------------------+ 
| +--------------+ | 
| +this is a link+ | 
| +--------------+ | 
+----------------------+

如上圖所示，我想做一個鏈接，但只給我懸停的效果只對我「這是一個鏈接」不是這個盒子的spacer（填充值）有。懸停效果只對其元素

HTML

<a href="#">this is a link</a>

CSS

a{display: block; width: 350px; padding: 10px; background: red; color: yellow;}

來源

2013-04-14 luxi

你要什麼效果創造？ –

懸停效果只對「這是一個鏈接」，而不改變我的標籤/ – luxi

@ user2253835你必須注入一些JavaScript。 – tehsockz

我建議你身邊的鏈接一個div，並給填充/保證金到div。裏面的鏈接可以點擊，但div不會。這可能是最簡單的解決方案，如果你能更改HTML代碼（但不限於CSS）

HTML

<div class="awrapper"><a href="#">this is a link</a></div>

CSS

.awrapper{display: block; width: 350px; padding: 10px;}

來源

2013-04-14 13:53:27

您可以border嘗試，沒有padding 。

a { 
    background: red; 
    display: block; 
    width: 350px; 
    color: yellow; 
    border: 10px solid red; 
} 

a:hover { 
    border: 10px solid white; 
}

http://jsfiddle.net/y86sV/3/

來源

2013-04-14 14:11:36

@ user2253835它不會刪除邊框，只需將鼠標懸停在鏈接上即可在邊框上設置白色。那是你想要的效果？ _我想做一個鏈接，但只想給我懸停的效果「這是一個鏈接」，而不是spacer_ –

那麼，我恐怕你不能那樣做。 –

懸停效果只對其元素

回答

相關問題