如何根据父悬停状态显示子对象或其他对象(仅限CSS)
我正在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的解决方案。
回答 3
Stack Overflow用户
发布于 2021-06-29 14:56:45
为您的第二个V形(应该出现)或任何fadeIn效果添加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'],
}
}
}Stack Overflow用户
发布于 2021-06-29 06:57:20
尝试创建状态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>
)
}Stack Overflow用户
发布于 2021-06-29 07:39:23
好吧，看起来我找到了一个解决方案。对我来说，这感觉有点老生常谈，但它很有效。诀窍是有一个父对象和两个子对象，它们将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://stackoverflow.com/questions/68170735
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号