Question

当我悬停图像时，我想要显示2个元素（一个div，在其中一个buttom）。我遇到了一些问题：它没有用！

我的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>

关于CSS：

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

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

#poupup-element{
  display: none;
}

div上的'discord-poupup'类只改变背景颜色和位置，它不会触摸显示。

好吧，当我用“discord-image”类悬停图像时，我希望用id“poupup-element”显示所有内容（最好在鼠标光标悬挂它并且已经激活时保持显示）。我尝试了很多东西，但没有任何作用：c有人可以帮帮我吗？

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

Answer 1

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

这是解决方案

的CSS：

Module not found: Error: Can't resolve './test.hbs' using description file: C:\solutions\mywebpart\package.json . Field 'browser' doesn't contain a valid alias configuration.

编辑：

HTML

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

Answer 2

像其他已经提到的那样，＆＃39; id＆＃39;应该是独特的。你可以尝试给你的div和按钮一个名为＆＃34; poupup-element＆＃34;的类。另外，你的img标签中有逗号，不应该有。

<强> HTML

＆＃13;

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

＆＃13;

.discord-image {
  border: solid #7289DA;
  border-radius: 100px;
}
.poupup-element{
  display: none;
}
img.discord-image:hover .poupup-element {
  display:block;
}

＆＃13;

使用CSS在悬停时显示元素

2 个答案:

的CSS：

HTML