CSS 悬停在特定的类上答案

【问题标题】：CSS to hover on specific classesCSS 悬停在特定的类上
【发布时间】：2020-05-18 04:51:25
【问题描述】：

当悬停在导航栏 (.topNav) 的任何位置时，我希望按钮在悬停时更改颜色。在我当前的代码中，仅当将鼠标悬停在按钮（.top、.middle、.bottom 类）上时才会发生更改。我使用 span 让它工作，但这改变了 .topNav 类中的所有 span。

html...

<nav class="navbar-default"
 <div class="topNav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle button_container collapsed" 
         [ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
         <span class="top"></span>
         <span class="middle"></span>
         <span class="bottom"></span>
       </button>
       </div>
        ....other content
 </div>
</nav>

SCSS...

   .top, .middle, .bottom {
        background: white;
        transition: 0.25s;
    }

    .topNav:hover, .button_container:hover, .top:hover, .middle:hover, 
    .bottom:hover {
        background: black;
        transition: 0.25s;
    }

【问题讨论】：

我认为这可以帮助你stackoverflow.com/questions/4502633/…

标签： html css angular

【解决方案1】：

给你：

.topNav{
  background: red;
}

.topNav:hover>.navbar-header>button {
  background: black;
  transition: 0.25s;
}

<nav class="navbar-default"><!-- OOPS YOU FORGOT TO CLOSE THIS TAG -->
 <div class="topNav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle button_container collapsed" 
         [ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
         <span class="top"></span>
         <span class="middle"></span>
         <span class="bottom"></span>
       </button>
       </div>
        ....other content
 </div>
</nav>

您忘记关闭nav 标签。
.topNav:hover>.navbar-header>button 表示当您将鼠标悬停在 .topNav 上时，选择一个特定的子元素（按钮）。然后用它做一些事情（把它涂成黑色）

【讨论】：

感谢您的回答。这不起作用，因为我正在尝试更改 .top、middle、.bottom 类的 3 个跨度的颜色，这是 3 条堆叠线的填充颜色。更改按钮并没有实现这一点。但是，您建议使用 navbar-header （很棒），当我将它与 span 一起应用时，它也可以工作（！）而无需更改其他跨度。我不知道为什么当我使用具有相同代码（？）的 button_container 时这不起作用。
@TMR .topNav:hover>.navbar-header>button>.top, .topNav:hover>.navbar-header>button>.middle, .topNav:hover>.navbar-header>button>.bottom{}。原理是一样的。
太棒了！这就是我正在寻找的语法。非常感谢。

【解决方案2】：

header a:hover{
  color:#BFEFFF;
  font-weight:bold;
}

在 CSS 代码中尝试这样的事情。我在我的网页上使用这个：http://www.kunalkolhe.com/

我从经验丰富的开发人员那里听说，在大型项目中使用 CSS 并不是一个好主意。

【讨论】：

【解决方案3】：

仅供参考...我可以使用两种解决方案...

1) 使用 navbar-header 类和跨度。以前，当我使用 .button_container 类（而不是 navbar-header）尝试相同的解决方案时，它不起作用。我还是不明白为什么。

使用 span 的代码...

  .navbar-header span {
        background: white;
        transition: 0.25s;
    }    
  .topNav:hover>.navbar-header span {
        background: black;
        transition: 0.25s; 
    }

2) 使用三个类的代码...

.top, .middle, .bottom {
        background: white;
        transition: 0.25s;
    }

.topNav:hover>.navbar-header>button>.top, .topNav:hover>.navbar-header>button>.middle, .topNav:hover>.navbar-header>button>.bottom {
        background: black;
        transition: 0.25s; 
    }

【讨论】：