html - 在 html 和 css 中使用悬停创建模糊和差异化边距

Question

你好，我正在尝试创建本网站左侧按钮的悬停效果 http://esya.iiitd.edu.in/#但无法。效果基本上是文本边距偏移和边距不均匀，我无法使用我拥有的任何代码知识(非常少)实现这一点

<style>
#button { 
\properties of button/
}
#button:hover {
\code that i am not able to write/
} 

这是否也只能使用 css 才能实现，还是我也可以使用 javascript(不是 jquery)？

Answer 1

只要您在按钮内使用带有 img 标签的普通图像，这完全可以用纯 css 实现

HTML 示例:

<a id="#button" href="someurl"><img src="someimage.jpg" /></a>

然后使用这个 CSS

#button {
transition: margin-left 1s;
margin-left: 0px;
}

#button:hover {
margin-left: 50px;
}

#button:hover img {
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

注意可以改变blur参数(这里5px调整模糊效果)如果要在图像上添加文本。在 img 标签之后和 colsing a 标签之前放置一个 SOMETEXT，并使用 position: relative 来正确定位它。