如何禁用 div 内特定元素的悬停效果？答案

【问题标题】：How do I disable hover effect for a particular element inside a div?如何禁用 div 内特定元素的悬停效果？
【发布时间】：2021-11-29 10:52:26
【问题描述】：

我想创建这个悬停效果：

基本上，当悬停其子元素中的特定元素时，阻止白色部分变暗。

这是我的 HTML 代码：

<div className= {css.searchBarDiv}>
  <div className={css.searchBarContent}/>
  <div className={css.searchBarButton}>
       <div className={css.button}>
           <Image/>
       </div>
  </div>
</div>

这是我对 CSS 代码的尝试：

.searchBarDiv {

  &:hover {
    background-color: #e7e7e7;
  }
  &:focus-within {
    background-color: #ffffff;
    box-shadow: rgb(0 0 0 / 20%) 0px 6px 20px;
  }
}

.searchBarButton {
  flex: 0 0 auto;
  margin-left: -6px;
  padding-right: 9px;
  align-self: center;
}
.button {
  max-width: 200px;
  animation-delay: 0.8s;
  background-color: #ee3465;
  color: #ffffff;
  cursor: pointer;

  &:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #df3562;
  }
}

【问题讨论】：

尝试从 .searchBarDiv 中移除 &:hover
您可以将悬停效果分配给 .searchBarContent 而不是父项吗？我假设输入字段在 .searchBarContent 元素内。而圆形按钮是兄弟姐妹。
我找不到它是哪种语言。请告诉css预处理器和html预处理器
并将 css 更改为 scss ,less 或您正在使用的东西
@Musafiroon 它刚刚在 REACT 中完成，class 而不是 className 将使其适用于常规代码。

标签： javascript html css reactjs

【解决方案1】：

使用类名包或 clsx 来组合你的类以获得更好的用户体验。这是被广泛接受的解决方案。如果您的项目不允许使用额外的包，请尝试为您的类设置条件，但是当悬停时的某些状态为真时，您会感觉像函数或内联条件来选择正确的类。欢快地聆听https://www.youtube.com/watch?v=0yXJ4t6Ax1U

【讨论】：

【解决方案2】：

根据您的需要，您需要背景中的悬停效果，不应覆盖按钮。所以我建议将悬停属性从 .searchBarDiv 移动到 .searchBarContent。对于按钮，使其定位为绝对位置并增加按钮的 z-index，因为它不会受到 .searchBarContent 中悬停变化的影响。仅将 searchBarDiv 用作您正在创建的自定义搜索字段的包装器。

【讨论】：

好吧，在这种情况下你可以看到更新的答案。
我的意思是，当我将鼠标悬停在按钮上时，我希望 div 不会被遮蔽。发生这种情况是因为按钮位于同一个 div 中，但我无法将其从该 div 中取出。
如果您不希望按钮在悬停时被着色，则将悬停时的背景颜色更改应用到 searchBarContent 而不是 searchBarDiv
但我希望在将鼠标悬停在 div 上时，按钮周围的阴影如图所示。只是当我们将鼠标悬停在按钮上时。我希望我能够解释我的问题，感谢您抽出时间来帮助我。

【解决方案3】：

使用自定义 CSS 类让这些孩子悬停在其中。

.searchBarDiv {
   .customClass{
       &:hover{ //bla bla bla}
   }
}

【讨论】：

如何在 HTML 中使用它？如何定义类名？