Показывать элементы при наведении курсора с помощью CSS

Question

Я хочу показать 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>

В CSS:

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

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

#poupup-element{
  display: none;
}

Класс 'discord-poupup' наdiv просто измените цвета фона и положения, это не касается отображения.

Хорошо, я хочу показать все с идентификатором 'poupup-element', когда наведу курсор на изображение с классом 'discord-image' (ижелательно, чтобы он показывался, пока курсор мыши на нем находится и он уже активен).Я перепробовал много вещей, но ничего не работает: c Может кто-нибудь помочь мне?

(я также использую Shiny (от R lang). Если есть более простой способ сделать то, что я хочу, пожалуйста, скажите -я)

Answer 1

Как и другие, уже упомянутые, 'id' должен быть уникальным.Вы можете попробовать дать вашему div и кнопке класс, называемый "poupup-element".Кроме того, в вашем теге img есть запятые, которых там быть не должно.

HTML

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

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

Answer 2

Я думаю, что была проблема с вашим HTML.Вы не должны иметь два одинаковых идентификатора.Также вам не следует вставлять запятые в ваши HTML-теги.

вот решение

css:

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

Редактировать:

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" >LOGOUT</button>
    </div>
  </center>
</div>