Fatal编程技术网
  • css/
  • Css 悬停时向上移动链接图像5px

Css 悬停时向上移动链接图像5px

css

Css 悬停时向上移动链接图像5px,css,hover,onhover,Css,Hover,Onhover,我将如何使用CSS和HTML实现与本网站公文包页面类似的效果 我原以为这样做就行了： a img{ margin-top: 5px; } a img:hover{ margin-top: 0px; } 但它不起作用，即使我把：悬停在链接上而不是img上。我搜遍了他的代码和css，但我一辈子都搞不明白这一点。请提供帮助：）职位：相对可以： a img:hover{ position: relative; top: -5px;} 请注意，posit

我将如何使用CSS和HTML实现与本网站公文包页面类似的效果

我原以为这样做就行了：

a img{
    margin-top: 5px;
}

a img:hover{
    margin-top: 0px;
}
但它不起作用，即使我把：悬停在链接上而不是img上。我搜遍了他的代码和css，但我一辈子都搞不明白这一点。请提供帮助：）

职位：相对
可以：

a img:hover{ position: relative; 
             top: -5px;}
请注意，
position:relative
保留文档流中的空间，就好像元素没有移动一样。但我认为在这种情况下，这不是一个问题。

您也可以使用CSS/HTML5动画：

您还可以将其包装到另一个parentdiv中，该parentdiv具有position:relative set:

<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}


.parent{
位置：相对位置；
}
.image{
位置：绝对位置；
顶部：0px；
左：0px；
}
。图像：悬停{
顶部：-15px；
}
给图像一个id：

<img id="imgHover" src="" />


 #imgHover:hover { margin-top: -5px; }


#imgHover:悬停{页边距顶部：-5px；}
确保您的html中包含此内容，以便IE知道如何正常工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
另请参见translate（）：

请参阅类似的工作示例：

+1有关
位置的信息：相对
。不知道。添加填充底部：5px以消除“闪烁”

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)
}