链接悬停css样式问题

Question

我想知道是否可以使用纯css在图像中链接悬停样式，或者我们需要使用背景图像，js或jquery等来实现此目的！

任何例子都会受到高度赞赏:) 谢谢，

Answer 1

最佳方式（例如，如果您需要支持Internet Explorer或需要自定义箭头），请使用50% 100%处的背景

HTML：

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
</ul>

CSS：

li { float: left; padding-bottom: 16px; }
li:hover { background: 50% 100% no-repeat url(http://www.staypoland.com/images/arrow-city-up.gif); }
a { float: left; }
a:hover { background: blue; }​

http://fiddle.jshell.net/Mcz3P/

Answer 2

您可以使用css伪类：after，来创建箭头。这可以减少无意义的HTML代码。

HTML：

<div class="div">
      About Us
</div>​

CSS：

.div {
    color: #fff;
    background-color: #09f;
    border: 2px solid #09f;
    font-size: 16px;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 100px;
}
.div:after {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    left: 50px;
    bottom: -10px;
    border-style: solid;
    border-width: 10px;
    border-color:  transparent transparent #09f transparent;
    height: 0;
    width: 0;
}

​

您可以在此处查看演示：http://jsfiddle.net/JMaV8/

Answer 3

是的，可以使用纯CSS，没有任何图像。您可以在CSSdeck上找到可能感兴趣的非常酷的内容。 @afshin的演示也是你可以从哪里开始做的好例子。所以继续......