首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用CSS在悬停时显示元素

使用CSS在悬停时显示元素
EN

Stack Overflow用户
提问于 2018-06-06 04:27:58
回答 1查看 166关注 0票数 1

当我悬停一张图片时,我想显示两个元素(一个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;
}

div上的‘discord poupup’类只是改变了背景颜色和位置,它在显示时不会发生变化。

好吧,当我用类‘discord image’悬停图像时,我想显示id为'poupup-element‘的所有内容(最好在鼠标光标悬停并且已经处于活动状态时保持显示)。我尝试了很多方法,但都不管用:c有人能帮我吗?

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

EN

回答 1

Stack Overflow用户

发布于 2018-06-06 05:05:01

我猜你的HTML出了点问题。你不应该有两个相同的ID,你也不应该在你的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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50708450

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档