html - 使 div 在悬停时影响另一个 div 的问题

Question

我有一个 ul 形式的下拉菜单。当鼠标悬停在下拉菜单上时，我想将“account-username”中的文本颜色更改为蓝色。

下面的我都试过了，完全不影响。

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

JSFIDDLE:https://jsfiddle.net/s136ayq6/2/

CSS

.username-panel {
  width: 153px;
  height: 100%;
  float: left;
}

a.account-username {
  width: 144px;
  height: 100%;
  text-align: center;
  overflow: hidden;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .8px;
  display: block;
  text-indent: 1px;
  position: relative;
  left: 5px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: .85;
  z-index: 99;
}

a.account-username:hover {
  transition: all .2s ease;
  opacity: 1;
}

a.account-username span {
  position: relative;
}

.account-username-dropdown {
  width: 154px;
  height: 100% auto;
  background-color: #F3F3F3;
  position: relative;
  left: 1px;
  top: 0px;
  /*border-bottom: 6px solid #AD93C5;
border-left: 6px solid #AD93C5;
border-right: 6px solid #AD93C5;*/
  border-radius: 0 0 10px 10px;
  line-height: 23px;
  font-family: 'Open sans';
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  visibility: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
  transition: all 0.3s ease 0s;
  box-shadow: 0 0 5px 0px #1d1e29;
  float: left;
}

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

.account-username-dropdown ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.account-username-dropdown li {
  color: #282A36;
  padding: 6px 18px;
  cursor: pointer;
  opacity: .85;
}

.account-username-dropdown li:hover {
  background-color: #DAD9D9;
  opacity: 1;
  transition: all .2s ease;
}

.account-username-dropdown li a {
  color: #282A36;
  text-decoration: none;
}

.account-username-dropdown li a:hover {
  color: #282A36;
  text-decoration: none;
}

.username-panel:hover .account-username-dropdown,
.account-username-dropdown li:hover>ul {
  visibility: visible;
}

.dropdown-footer {
  width: 154px;
  font-size: 11px;
  font-weight: 300;
  color: #1d1e29;
  text-align: center;
  padding: 3px 0px 10px 0px;
}

**HTML**

<div class="username-panel">
  <a class="account-username" href="#"><span>TEXT TURN & STAY BLUE WHILE HOVERED OVER THE DROPDOWN NUMBERS CONTAINER BELOW</span></a>
  <div class="account-username-dropdown">
    <ul class="username-dropdown">
      <li><a href="#">1</li>
                        <li><a href="#">2</li>
                        <li><a href="#">3</li>
                       <li><a href="#">4</li>
                        <li><a href="#">5</li>
                    </ul>
                    <div class="dropdown-footer">
                        <a href="#">a</a>
        <a href="#">b</a>
  </div>
</div>
</div>

Answer 1

CSS代码

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

不适用于您的 HTML 顺序。

这种悬停效果只能影响 child 。

所以我添加了你的 CSS 行，并对你的代码做了一点小改动。

.username-panel {
  width: 153px;
  height: 100%;
  float: left;
}

a.account-username {
  width: 144px;
  height: 100%;
  text-align: center;
  overflow: hidden;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .8px;
  display: block;
  text-indent: 1px;
  position: relative;
  left: 5px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: .85;
  z-index: 99;
}

a.account-username:hover {
  transition: all .2s ease;
  opacity: 1;
}

a.account-username span {
  position: relative;
}

.account-username-dropdown {
  width: 154px;
  height: 100% auto;
  background-color: #F3F3F3;
  position: relative;
  left: 1px;
  top: 0px;
  /*border-bottom: 6px solid #AD93C5;
border-left: 6px solid #AD93C5;
border-right: 6px solid #AD93C5;*/
  border-radius: 0 0 10px 10px;
  line-height: 23px;
  font-family: 'Open sans';
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  visibility: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .35);
  transition: all 0.3s ease 0s;
  box-shadow: 0 0 5px 0px #1d1e29;
  float: left;
}

.account-username-dropdown:hover a.account-username {
  color: blue !important;
}

.account-username-dropdown ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.account-username-dropdown li {
  color: #282A36;
  padding: 6px 18px;
  cursor: pointer;
  opacity: .85;
}

.account-username-dropdown li:hover {
  background-color: #DAD9D9;
  opacity: 1;
  transition: all .2s ease;
}

.account-username-dropdown li a {
  color: #282A36;
  text-decoration: none;
}

.account-username-dropdown li a:hover {
  color: #282A36;
  text-decoration: none;
}

.username-panel:hover .account-username-dropdown,
.account-username-dropdown li:hover>ul {
  visibility: visible;
}

.dropdown-footer {
  width: 154px;
  font-size: 11px;
  font-weight: 300;
  color: #1d1e29;
  text-align: center;
  padding: 3px 0px 10px 0px;
}

.username-panel:hover a.account-username {
  color: blue;
}

<div class="username-panel">
  <a class="account-username" href="#">
    <span>TEXT TURN & STAY BLUE WHILE HOVERED OVER THE DROPDOWN NUMBERS CONTAINER BELOW</span>
  </a>
  <div class="account-username-dropdown">
    <ul class="username-dropdown">
      <li><a href="#">1</li>
      <li><a href="#">2</li>
      <li><a href="#">3</li>
      <li><a href="#">4</li>
      <li><a href="#">5</li>
    </ul>
    <div class="dropdown-footer">
      <a href="#">a</a>
      <a href="#">b</a>
    </div>
  </div>
</div>

更新:更改了代码片段以真正回答您的问题并删除了 !important，因为它不需要。