Question

http://jsbin.com/wibasu/edit?html,output

如您所见，当您将鼠标悬停在第二行选项上时，即使悬停创建的背景未超出其边框，红色边框也会向下移动。是否有一种方法可以使底部背景不会向下移动？

Answer 1

从：hover

中删除高度和边距底部

     #topicmenu li:hover {
        background-color:#a8a8a8;
        color:black;
        cursor:pointer;
      }

Answer 2

您在悬停中添加了导致空白区域的边距删除此

#topicmenu li:hover {
    background-color: #a8a8a8;
    color: black;
    cursor: pointer;
    height: 20px;
    /*margin-bottom: 5px;*/
}

Answer 3

这是由您的样式中的两个CSS规则创建的：

margin-bottom: 5px;
height: 20px;

根据您的CSS，:hover时都会应用。要解决此问题，请将这些样式规则移至没有:hover的定义。

http://jsbin.com/gefepuyoca/1/edit?html,output

Answer 4

<强> HTML

<!DOCTYPE html>
<html>
<head>
<title>navigation bar</title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>

<body>
<div class="navigation">
    <ul>
        <li>Home</li>
        <li>AboutUs</li>
        <li>stackoverflow</li>
    </ul>
</div>

</body>
</html>

<强> CSS

body{
    margin: 0;
}

div.navigation ul{
    list-style-type: none;
}

div.navigation ul li{
    float:left;
    background-color: black;
    color: white;
    margin: 0.5px;
    padding:10px;
    cursor: pointer;
    font-size: 50px;

}

div.navigation ul li:hover{
    background-color: yellow;
}

如何使鼠标悬停不向后移动背景？（初学者CSS）

4 个答案:

如何使鼠标悬停不向后移动背景？ （初学者CSS）

4 个答案:

如何使鼠标悬停不向后移动背景？（初学者CSS）