如何根据父悬停状态显示孩子或其他人（仅限 CSS）答案

【问题标题】：How to show a child or another depending on parent hover state (CSS Only)如何根据父悬停状态显示孩子或其他人（仅限 CSS）
【发布时间】：2021-09-11 04:39:16
【问题描述】：

我正在反应中构建一个菜单组件，它显示一个选项列表。每个选项的左侧都有一个文本，右侧有一个“>”图标。但是，当我将鼠标悬停在父级上时，我希望“>”符号更改为“>>”。我怎样才能做到这一点？我已经添加了源的当前状态。我只需要在父鼠标悬停时隐藏 BsChevronRight 并显示 BsChevronDoubleRight ，反之亦然。

function Menu({data}:{data:IMenuItemData[]}) {
    return (
        <div className="w-2/12 flex flex-col absolute top-2/4">
            {data.map(el => {
                return <a href="#" className="flex row justify-between items-center group">
                        {el.text}
                        <BsChevronRight></BsChevronRight>
                        <BsChevronDoubleRight></BsChevronDoubleRight>
                        </a>
                    
            })}
        </div>    
        
    )
}

我正在寻找纯 CSS 的解决方案。

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

尝试创建状态isHovered 并使用onMouseEnter 和onMouseLeave 切换

function Menu({data}:{data:IMenuItemData[]}) {
    const [isHovered , setIsHovered] = useState(false);
    const handleMouseEnter = ()=>{
          setIsHovered(true)
    }
    const handleMouseLeave = ()=>{
          setIsHovered(false)
    }
    return (
        <div className="w-2/12 flex flex-col absolute top-2/4">
            {data.map(el => {
                return <a onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} href="#" className="flex row justify-between items-center group">
                        {el.text}
                        {!isHovered ? <BsChevronRight/> : 
                        <BsChevronDoubleRight/>}
                        </a>
                    
            })}
        </div>    
        
    )
}

【讨论】：

是的，这行得通。但我一直在寻找仅 css（如果可能）选项。不要为每个项目都保留一个状态。不管怎样，谢谢你的尝试！我只是将其添加到标题中以更清楚。

【解决方案2】：

嗯，看来我有办法了。对我来说感觉有点hacky，但它有效。诀窍是让一个父级和两个子级在无和块之间翻转显示属性。

对我来说，它可以胜任。如果有人有更好的解决方案，我会全力以赴。

HTML：

<html>
  <body>
    <div class="parent">
      Hello
      <div class="child1"></div>
      <div class="child2"></div>
    </div>
  </body>
</html>

CSS：

.parent {
   width:300px;
   height:300px;
   background-color:yellow;
   display:flex;
}

.parent:hover > .child1 {
  display:block;
}

.parent:hover > .child2 {
  display:none;
}

.child1 {
  display:none;
  width: 100px;
  height:100px;
  background-color: green;
}

.child2 {
  display:block;
  width: 100px;
  height:100px;
  background
}

https://jsfiddle.net/pyfL7r03/42/

【讨论】：

【解决方案3】：

为您的第二个 V 形（应该出现）或任何淡入效果添加 hidden group-hover:block 类，例如：invisible group-hover:visible 或 opacity-0 group-hover:opacity-100。你的父 a 元素应该有 group 类才能工作。

注意：如果您在未启用 jit 模式的情况下使用 TailwindCSS，则需要 extend 一些属性以支持 group-hover 变体

// tailwind.config.js
module.exports = {
  variants: {
      extend: {
        display: ['group-hover'],
        visibility: ['group-hover'],
      }
   }
}

演示：https://play.tailwindcss.com/XifyCwLkFV

【讨论】：

是的，我知道。刚刚发布了 css 代码，因为它很容易翻译成顺风，最后和你做的一样。无论如何我会接受你的回答，因为我的问题有顺风标签。