Question

我希望列表项目：主页，仪表板和联系我们在悬停时变为绿色。它会变成绿色，但也会随机移动。前两个代码位是我遇到问题的代码部分，最后两个是我的完整代码，以防万一你需要它。谢谢你的时间。

  <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;
}

Answer 1

它正在移动和闪烁，因为您正在改变大小并在悬停时定位。

试试这个：

.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/

编辑：以前的链接错了，抱歉！

Answer 2

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

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

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

CSS悬停命令问题

2 个答案: