演示

Question

我试图在将鼠标悬停在容器上时显示文本。

我有这段代码，当将鼠标悬停在item2上时可以显示一些文本。所有这些都在容器内部。但是，问题是，如果您将鼠标悬停在item1或item3以外的任何地方（例如它们之间），则文本将再次消失或在display：none之间进行垃圾邮件交换。并显示：flex;

代码：

.item1 {
    font-size: 1.5em;
    font-family: 'Poppins', sans-serif;
  grid-column:1 / span 1;
}

.item2 {
  grid-column: 1 / span 1;
}

.item2:hover + .item3{
    display: flex;
}


.item3:hover{
    display: flex;
}

.item3 {
  display: none;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 2;
  align-items: center;
  font-size: 1.5em;
}

要解决此问题，我尝试过：

.grid-containerTest:hover + .item3{
    display: flex;
}

什么都不做。如果将鼠标悬停在.grid-containerTest上并显示.item3，该怎么办？

Answer 1

您需要在CSS中删除容器悬停的+，当下一个同级与您提供的类匹配时，+适用。您希望将其悬停在容器的子容器上。

我相信下面的代码可以按照您的意愿工作。

.grid-containerTest:hover .item3 {
    display: flex;
}

让我知道这是否不是您想要的

演示

.item1 {
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 1;
}

.item2 {
  grid-column: 1 / span 1;
}

.item3 {
  display: none;
  font-family: 'Poppins', sans-serif;
  grid-column: 1 / span 2;
  align-items: center;
  font-size: 1.5em;
}

.grid-containerTest:hover .item3 {
  display: flex;
}

<div class="grid-containerTest">
  <div class="item1">
    Item 1
  </div>
  <div class="item2">
    Item 2
  </div>
  <div class="item3">
    Item 3
  </div>
</div>

将鼠标悬停在容器上时如何显示文本？

1 个答案:

演示