CSS 悬停命令问题答案

【问题标题】：CSS hover command problemsCSS 悬停命令问题
【发布时间】：2015-06-16 20:26:57
【问题描述】：

我希望列表项：主页、仪表板和联系我们在悬停时显示为绿色。它会变成绿色，但它也会在非常随机的位置移动。前两个代码位是我遇到问题的代码部分，后两个是我的完整代码，以防您需要它。感谢您的宝贵时间。

  <div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>

这是我的 CSS：

#home:hover {
    padding:6px;
    width:100px;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:70px;
}
#dashboard:hover {
    padding:6px;
    width:100px;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:70px;
}
#contactUs:hover {
    padding:6px;
    width:100px;;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:60px;
}

这显然不是我的完整代码，但以防万一你需要它，我的完整代码是：

<!DOCTYPE html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
  <div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>
  <div class="dropdownHome">
    <ul class="catLists">
        <li class="catListItem">Event Calender</li><br>
        <li class="catListItem">Bookings</li><br>
        <li class="catListItem">Picture Gallery</li><br>
        <li class="catListItem">Login</li><br>
        <li class="catListItem">Sign Up</li>
    </ul>
  </div>
  <div class="dropdownDashboard">
    <ul class="catLists">
        <li class="catListItem">Saved Info</li><br>
        <li class="catListItem">Friends</li><br>
        <li class="catListItem">Document</li><br>
        <li class="catListItem">Profile</li><br>
        <li class="catListItem">Account</li>
    </ul>
  </div>
  <div class="dropdownContactUs">
    <ul class="catLists">
        <li class="catListItem">Email</li><br>
        <li class="catListItem">Forum</li><br>
        <li class="catListItem">Phone-numbers</li><br>
        <li class="catListItem">Facebook</li><br>
        <li class="catListItem">Twitter</li>
    </ul>
  </div>
</body>
</html>

还有 CSS：

.header {
    background-color:black;
    height:50px;
    border-radius:10px;
    z-index:1;
}
li {
    color:white;
    display:inline;
    width:100%
}
.cats {
    padding:6px;
    width:100%;
    font-size:29px;
    font-family: 'Khand', sans-serif;
}
#home:hover {
    padding:6px;
    width:100px;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:70px;
}
#dashboard:hover {
    padding:6px;
    width:100px;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:70px;
}
#contactUs:hover {
    padding:6px;
    width:100px;;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    left:60px;
}
.listItems {
    padding:70px;
}
.dropdownHome {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:relative;
    left:18px;
    bottom:10px;
    border:2px solid black;
    z-index:-1;
    border-radius:13px;
}
.dropdownDashboard {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:relative;
    right:290px;
    bottom:214px;
    border:2px solid black;
    z-index:-1;
    float:right;
    border-radius:13px;
}
.dropdownContactUs {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:relative;
    left:140px;
    bottom:214px;
    border:2px solid black;
    z-index:-1;
    float:right;
    border-radius:13px;
}
.catLists {
    font-size:18px;
    text-align:center;
    position:relative;
    right:20;
    font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
    color:black;
}

【问题讨论】：

jsfiddle.net/hvwxnen0/1
非常感谢。我刚刚删除了您发布的代码中的填充，它工作得很好

标签： html css hover html-lists

【解决方案1】：

没有必要为 de hoover 选项做这么多定义。如果你只改变颜色，就这样吧：

#home:hover {
    color:#96F29C;
}

其他定义使菜单跳转和闪烁。

【讨论】：

【解决方案2】：

它正在移动和闪烁，因为您在悬停时仅更改大小和位置。

试试这个：

.cats li {
    padding:6px;
    width:100px;
    font-size:29px;
    font-family: 'Khand', sans-serif;
    display:inline;
    position:relative;
    left:60px;
}

.cats li:hover {
    color:#96F29C;
}

在这里演示：https://jsfiddle.net/mvzson9c/

编辑：上一个链接有误，抱歉！

【讨论】：