为什么我的背景图像在悬停时移动? :(
Why does my background-image move on hover? :(
My problem is here
嗨,谁能告诉我,问题出在哪里?
将 li 悬停在 class .cerny 之后,我的背景图像刚刚移动
这是我的代码。
aside nav ul {
list-style-type:none;
margin:0;
padding:0;
margin-top:25px;
}
li.cerny {
height:50px;
background: url("images/cerny.png") no-repeat top left;
margin-left:-24.2px;
margin-bottom:5px;
}
.cerny:hover {
color:black;
background: url("images/menu_hover.png") no-repeat top left;
}
.cerny a{
text-decoration:none;
color:wheat;
display:block;
padding-top:18px;
padding-left:40px;
font-size:15px;
<aside>
<nav>
<ul>
<li class="cerny"><a href="#" style="margin-top:20px;">Můj statek</a></li>
<li class="cerny"><a href="#">Tržiště</a></li>
<li class="cerny"><a href="#">Město</a></li>
<li class="cerny"><a href="#">Soutěžní centrum</a></li>
<li class="cerny"><a href="#">Okolí</a></li>
</ul>
</nav>
</aside>
可能是您的图片(cerny.png
和 menu_hover.png
)尺寸不一样。在 Photoshop 中检查。
My problem is here
嗨,谁能告诉我,问题出在哪里?
将 li 悬停在 class .cerny 之后,我的背景图像刚刚移动
这是我的代码。
aside nav ul {
list-style-type:none;
margin:0;
padding:0;
margin-top:25px;
}
li.cerny {
height:50px;
background: url("images/cerny.png") no-repeat top left;
margin-left:-24.2px;
margin-bottom:5px;
}
.cerny:hover {
color:black;
background: url("images/menu_hover.png") no-repeat top left;
}
.cerny a{
text-decoration:none;
color:wheat;
display:block;
padding-top:18px;
padding-left:40px;
font-size:15px;
<aside>
<nav>
<ul>
<li class="cerny"><a href="#" style="margin-top:20px;">Můj statek</a></li>
<li class="cerny"><a href="#">Tržiště</a></li>
<li class="cerny"><a href="#">Město</a></li>
<li class="cerny"><a href="#">Soutěžní centrum</a></li>
<li class="cerny"><a href="#">Okolí</a></li>
</ul>
</nav>
</aside>
可能是您的图片(cerny.png
和 menu_hover.png
)尺寸不一样。在 Photoshop 中检查。