css - 链接悬停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 的演示也是一个很好的例子，说明你可以从哪里开始做。所以继续...