Html 使用CSS在悬停状态下显示元素

我想在悬停图像时显示2个元素（一个div，其中一个按钮）。我遇到了一些问题：它不起作用

我的HTML代码：

<div class="discord-container">
    <center>
    <img src="https://i.imgur.com/7K3OLPH.png", class="discord-image", width="75"/>
    <div class="discord-poupup" id="poupup-element">
      <button onClick="discord.logout()" class="logout-button" id="poupup-element">LOGOUT</button>
    </div>
    </center>
  </div>

div上的“discord poupup”类只更改背景颜色和位置，而不在显示器上显示

好的，当我用类'discord image'悬停图像时，我想用id'poupp element'显示所有内容（最好在鼠标光标移动它并且它已经处于活动状态时保持显示）。我试了很多东西，但都不管用：有人能帮我吗

---

（我也在使用Shiny（来自R lang）。如果有更简单的方法来做我想做的事情，请告诉我）

我想你的HTML有问题。你不应该有两个相同的ID。此外，您不应该在HTML标记中添加逗号

这是解决办法

css: 编辑：

html

注销

像前面提到的其他人一样，“id”应该是唯一的。您可以尝试为div和button提供一个名为“poupup元素”的类。 此外，您的img标签中有逗号，但不应出现

HTML

注销

.discord-image {
  border: solid #7289DA;
  border-radius: 100px;
}

img.discord-image:hover + div#poupup-element:hover {
  display:block;
}

#poupup-element{
  display: none;
}

#poupup-element{
  display:none;
}
.discord-image:hover + #poupup-element{
  display:block;
}

 <div class="discord-container">
  <center>
    <img src="https://i.imgur.com/7K3OLPH.png" class="discord-image"  width="75" />
    <div class="discord-poupup" id="poupup-element">
      <button onClick="discord.logout()" class="logout-button" >LOGOUT</button>
    </div>
  </center>
</div>