Question

+----------------------+
|  +--------------+    |
|  +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;}

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/

悬停效果仅限于其元素

2 个答案: