链接悬停CSS样式问题

我在想，如果链接悬停风格的图像中，可以使用纯CSS或我们需要使用背景图片，JS或jQuery的等来达到这个目的。链接悬停CSS样式问题

enter image description here

任何示例将高度赞赏:) 谢谢，

来源

2012-09-26 Anupam

你有没有真正尝试的东西吗？ – Kyle

我认为这是一个背景图片。 – Mudasar

哦，是的，我做了，只是在寻找建议.. – Anupam

的最佳方式（如果，例如，需要支持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/

来源

2012-09-26 07:48:17

是的，它有可能与纯CSS，没有任何图像。你可以在CSSdeck上找到非常酷的东西，例如你可能会感兴趣的东西。 @afshin的演示也是你可以从哪里开始做的好例子。就这么走了......

来源

2012-09-26 07:54:58 F0G

是的我正在@ afshin的例子。感谢您的链接，真的很有用。 – Anupam

您可以使用CSS伪CLASSE：后创建的箭头。这可以减少无意义的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/

来源

2012-09-26 08:01:29 Leigh

链接悬停CSS样式问题

回答

相关问题