Question

我一直试图制作一个带有小图像的导航栏，当你将鼠标悬停在它们上面时，它会响应（从顶部开始10px）。我通过类选择器应用了悬停效果，然而，当我将鼠标悬停在一张图像上时，其余图像也会响应。那么，我可以使用类选择器来纠正这个问题吗？

这是html方面。

<a href=""><img class="menu" src="weight.png" /></a>
<a href=""><img class="menu" src="height.png" /></a>

这是css：

.menu{
    height:100px;
    width:100px; 
    transition:all 0.3s ease-in; margin-left:15px; 
    margin-top:5px;
}
.menu:hover{
    margin-top:15px;
    transition:all 0.3 ease-in;
}

感谢您的帮助。

Answer 1

内联内容的默认垂直对齐方式是“baseline”。这意味着默认情况下您的图片会粘贴到a元素的底部。要解决此问题，您只需将img元素上的vertical alignment设置为“顶部”：

.menu {
    ...
    vertical-align: top;
}

JSFiddle demo

CSS类选择器悬停

1 个答案: