如何在父元素悬停状态下显示子元素或其他元素（仅使用 CSS）

Question

如何在父元素悬停状态下显示子元素或其他元素（仅使用 CSS）

3

我正在用 React 构建一个菜单组件，它显示一些选项列表。每个选项在左侧都有文本，在右侧则有 ">" 图标。但是，当我将鼠标悬停在父元素上时，我希望 ">" 符号变成 ">>"。我该如何实现呢？我已经添加了当前源代码的状态。我只需要在父元素悬停时隐藏 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的解决方案。

- Notbad

4个回答

1

好的，看起来我找到了一个解决方案。对于我来说，它有点 hacky，但它有效。

诀窍是使用一个父元素和两个子元素，在它们之间切换 display 属性为 none 和 block。

对于我来说，这样做已经够了。如果有人有更好的解决方案，我全耳听。

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/

- Notbad

1

在Tailwind中有一种快速的方法可以做到这一点：

1.) 在父元素上添加一个"group"类，例如：

<div class="group i-am-parent">

2.) 在子元素上添加悬停效果，前缀为group，例如：

<div class="i-am-child group-hover:scale-110">

更多信息请参阅Tailwind文档：https://tailwindcss.com/docs/hover-focus-and-other-states

- jacobedawson

0

尝试创建一个状态变量 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>    
        
    )
}

- Ahmed Ghonem

是的，这个方法可以起作用。但是我希望能找到一个只使用CSS的选项（如果可能的话）。不想为每个项目都保留一个状态。无论如何，还是谢谢你的尝试！我只是在标题中添加了一些内容以更清楚地表达我的意思。 - Notbad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ihar Aliakseyenka · Accepted Answer

为你的第二个 chevron 添加 hidden group-hover:block 类（它应该出现），或者使用任何 fadeIn 效果，如：invisible group-hover:visible 或 opacity-0 group-hover:opacity-100。你的父级 a 元素应该有 group 类才能生效。

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

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

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