我想问两个问题。我的自举程序中有一个盒子，当我将其悬停在盒子上时，它的颜色变为紫色，盒子中的“ Join”一词变为白色。问题是，仅当我将鼠标悬停在特定文本上时，文本Join才是白色，并且只要我在整个框内，我希望它保持白色，而不是仅当我在“ Join”一词上时。如果我将鼠标移到Join一词的右边或左边一点，而当我在盒子里时，Join这个词不再是白色的，而是像以前一样是灰色的，在我悬停之前超过它。Join字为白色，因为我的鼠标位于其上方。但是，当我将鼠标左移一点时，Join一词再次变为灰色。我的第二个问题是，当我调整页面大小并显示汉堡菜单时，我的菜单组合不在同一垂直行上。您可以在图片编号1上看到“加入”框的左侧。如何使“加入”与菜单的其余部分对齐？
这是我的HTML代码：
<li class="centeredjoin"><a class="joinclass" href="#" style="color: #95979D">
<b> Join </b></a>
</li>这是我的CSS：
a:hover { /* Only the word Join becomes white */
color: white;
}
.centeredjoin:hover { /* The whole background becomes purple */
color: white;
background-color: purple;
}
查看CSS中的选择器：
a {
color: #95979D;
}
.centeredjoin:hover {
/* The whole background becomes purple */
color: white;
background-color: purple;
}
.centeredjoin:hover a {
color: inherit
}<li class="centeredjoin">
<a class="joinclass" href="#">
<b> Join </b></a>
</li>将样式属性更改为样式表。样式属性的样式始终会覆盖样式表样式。
您可以了解MDN的特异性的更多详细信息。
.joinclass {
color: #95979D;
}
a:hover {
/* Only the word Join becomes white */
color: white !imporntant;
}
.centeredjoin:hover {
/* The whole background becomes purple */
color: white;
background-color: purple;
}<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<ul>
<li class="centeredjoin">
<a class="joinclass" href="#">
<b> Join </b></a>
</li>
</ul>您可以查看下面的代码，其中仅使用hover属性，您可以轻松理解。
.rightmenu{
width: 25%;
height: 100px;
float: left;
}
.rightmenu ul{
display: inline-flex;
margin-left: 200px;
}
.rightmenu ul li{
display: inline-flex;
list-style: none;
font-size: 15px;
color: black;
font-weight: bold;
line-height: 40px;
margin-left: 40px;
text-transform: uppercase;
margin-top: 30px;
}
.rightmenu ul li i{
margin-top: 12px;
}
.rightmenu .fa{
margin-right: 6px;
}
#firstlist{
color: orange;
}
.firstlist, .rightmenu ul li:hover{
color: orange;
background: white;
border-radius: 3px;
}<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" type=" text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="rightmenu">
<ul>
<li id="firstlist"><i class="fa fa-home" aria-hidden="true"></i> HOME </li>
<li><i class="fa fa-clone" aria-hidden="true"></i> SERVICES </li>
</ul>
</div>
</body>
</html>