Question

我有一个内联显示的简单HTML / CSS列表。我正在使用列表的背景图像和该列表的onhover命令的另一个变体。

悬停背景图片似乎无法正确显示。它显示略大，似乎有一些默认填充，

在CSS中控制onhover命令的背景图像的大小，填充和边距的最佳方法是什么？

提前致谢

#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}

#navbar a{
color: white;
text-decoration: none;
}

#navbar ul{
list-style: none;
margin:0;
padding:0;
}

#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 1px 10px 1px 10px;

}

#navbar li:hover{
background-image: url('../images/navbar-selected.png'); 
}

<div class="clear" id="navbar">
    <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="stock.php">Stock</a></li>
      <li><a href="overview.php">Overview</a></li>
</ul>   
</div>

Answer 1

你可以这样做：

#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-size: 50%;
background-position: center;
}

CSS背景图像放置：悬停

1 个答案: