当我悬停一张图片时,我想显示两个元素(一个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)。如果有更简单的方法来做我想做的事情,请告诉我)
发布于 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>
https://stackoverflow.com/questions/50708450
复制相似问题