html - 仅对其元素的悬停效果

Question

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

如上图，我想创建一个链接，但只想给我的“这是一个链接”而不是这个框的间隔（填充值）提供悬停效果。

html

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

css

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

Answer 1

我建议你在链接周围有一个 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;}

Answer 2

您可以尝试使用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/