CODEWITHSUNDEEP
htmlcsshoverhideshow-hide
NathanPB
NathanPB

Reputation: 735

Show elements on hover with CSS

I want to show 2 elements (one div, inside it one buttom) when I hover an image. I got some problems: It didn't works!

My HTML code:

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

On CSS:

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

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

#poupup-element{
  display: none;
}

The 'discord-poupup' class on div just change background colors and positions, it don't touch on display.

Well, I want to show everything with id 'poupup-element' when I hover the image with class 'discord-image' (and preferably keep it showing while the mouse cursor is hoving it AND its already active). I tried lots of things, but nothing works :c Can someone help-me?

(I'm also using Shiny (from R lang). If there is an easier way to do what I want please tell-me)

Upvotes: 1

Views: 246

Answers (2)

byeke
byeke

Reputation: 68

I guess there was an issue with your HTML. You should not have two same ID's. Also you should not put commas in your HTML tags.

here's the solution

css:

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

Edit:

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>

Upvotes: 1

NAM KIM
NAM KIM

Reputation: 23

Like others already mentioned, 'id' should be unique. You could try giving your div and button a class called "poupup-element". Also, you have commas in your img tag that should not be there.

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

Upvotes: 1

Related Questions