在许多网站上,例如 http://notes.envato.com/您会注意到,当将鼠标悬停在链接上时,它们会淡入不同的颜色,而不是立即切换,这是默认操作。怎么做?
我试过了 HTML:
<ul class="icons">
<li class="flickr">
<a href="http://flickr.com/photos/we-are-envato" rel="external" title="Flickr">
<img src="img/flickr.png" target="_blank">
</a>
</li>
</ul>
CSS:
ul.icons {
position: absolute;
top: 95px;
right: 0;
z-index: 100;
}
li {
display: inline;
padding: 5px;
}
li a {
list-style: none;
text-decoration: none;
}
li.flickr a {
height: 50px;
width: 50px;
}
li.flickr a:hover {
color: #A5BA84;
}
谁能告诉我怎么设置效果?
最佳答案
您将需要使用 CSS 将过渡应用到 anchor 。这是一个例子:
/* replace 0.5s in each one with the time you want it to take */
a {
text-decoration: none;
color: #007edf; /* starting color */
transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
}
a:hover {
color: #0069ba; /* ending color */
}
关于html - 如何将褪色的悬停效果放在按钮上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17471475/