悬停时将链接图像向上移动 5px
Posted
技术标签:
【中文标题】悬停时将链接图像向上移动 5px【英文标题】：Move link image 5px up on hover 【发布时间】：2011-07-23 20:54:26 【问题描述】：我将如何使用 CSS 和 html 实现与本网站的投资组合页面 Solid Giant 上的效果类似的效果？
我原以为只要放这样的东西就可以了：
a img
margin-top: 5px;
a img:hover
margin-top: 0px;
但它不起作用，即使我将 :hover 放在链接上而不是 img 上。我搜索了他的代码和 css，但我一生都无法弄清楚这一点。请帮忙:)
【问题讨论】：
【参考方案1】：position: relative 可以工作：
a img:hover position: relative;
top: -5px;
注意position: relative 保留文档流中的空间，就好像元素没有被 移动一样。但我认为在这种情况下，这不是问题。
【讨论】：
+1 获取有关position: relative 的信息。不知道。
添加 padding-bottom: 5px 以消除“闪烁”【参考方案2】：
另见 translate()：
http://www.w3schools.com/css/css3_2dtransforms.asp
img:hover
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px)
查看类似的工作示例：http://jsfiddle.net/rimian/7aPvS/1/
【讨论】：
【参考方案3】：您也可以使用 CSS/HTML5 动画：http://slides.html5rocks.com/#css-animation
你也可以将它包装在另一个具有 position:relative 集的 parentdiv 中：
<div class="parent">
<img class="image" />
</div>
.parent
position:relative;
.image
position:absolute;
top:0px;
left:0px;
.image:hover
top:-15px;
【讨论】：
【参考方案4】：你可以使用#
在 HTML 中?
<div> id="move" </div>
在 CSS 中?
#move
position: relative;
top: 0;
transition: top ease 1s;
#move:hover
top: -5px;
【讨论】：
【参考方案5】：给图片一个id：
<img id="imgHover" src="" />
#imgHover:hover margin-top: -5px;
【讨论】：
【参考方案6】：确保你的 html 中有这个，以便 IE 知道如何正常工作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
【讨论】：
以上是关于悬停时将链接图像向上移动 5px的主要内容，如果未能解决你的问题，请参考以下文章