悬停效果只对其元素

-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_ –

那么，我恐怕你不能那样做。 –

悬停效果只对其元素

回答

相关问题