前端 - 我想hover的时候子元素出现。tailwind应该咋写？

Question

我想hover的时候子元素出现。tailwind应该咋写

 {imgUlrs.map((item, index) => {              return (                <div                  key={index}                  className={`relative mr-2 p-1 border border-[#d9d9d9] border-solid rounded-md cursor-pointer hover:border-[#bfbfbf]                    hover:div:block                  `}                >                  <img className="" src={item} alt="" width={60} height={60} />                  <div className="absolute top-0 right-0 left-0 bottom-0 w-full h-full bg-gray-400 hidden ">                    <span className="absolute top-0 right-0 text-[16px] bg-gray-700 w-4 h-4 rounded-full">                      X                    </span>                  </div>                </div>              );            })}

就是实现一个鼠标放上去，出现一个遮罩层，然后有个删除的X.

加个group没问题了。我把map里面的提取成组件后，我hover其中一个元素，其他的元素也成block了。

Answer 1

{imgUlrs.map((item, index) => {  return (    <div      key={index}      className="relative mr-2 p-1 border border-[#d9d9d9] border-solid rounded-md cursor-pointer hover:border-[#bfbfbf] group"    >      <img src={item} alt="" width={60} height={60} />      <div className="absolute top-0 right-0 left-0 bottom-0 w-full h-full bg-gray-400 hidden group-hover:block">        <span className="absolute top-0 right-0 text-[16px] bg-gray-700 w-4 h-4 rounded-full">          X        </span>      </div>    </div>  );})}

Answer 2

你可以通过在父元素上添加一个 hover 伪类，来控制子元素的显示和隐藏。具体来说，你可以在父元素的 CSS 中添加以下样式：

.parent:hover .child {  display: block;}

这将使得当鼠标悬停在 .parent 元素上时，其子元素 .child 将显示出来。

然后，你需要在 HTML 中将 .child 元素放置在 .parent 元素的内部，如下所示：

<div class="parent">  <img src="your-image-source" alt="your alt text" />  <div class="child hidden">    <span>X</span>  </div></div>

这里的 .hidden 类会使 .child 元素默认隐藏，而 :hover .child 规则将使它在鼠标悬停时显示出来。

请注意，你需要根据你的具体需求调整这些代码。例如，你可能需要调整 .parent 和 .child 的具体类名，或者调整 .child 中的内容。