[英]CSS hover is not working: trying to display a description when hovering over an icon
So I am a beginner in programming, and I am having trouble making my code work. 因此,我是编程的初学者,但使我的代码无法正常工作。 I do not know why hover is not working and would love to find out what my bug is. 我不知道为什么悬停无法正常工作,很想找出我的错误所在。 As stated in the title, I would like to display a small note when hovering over an information icon (like the ones you find next to the input sections on online forms). 如标题中所述,将鼠标悬停在信息图标上时,我想显示一个小注释(例如您在在线表单的输入部分旁边找到的图标)。 I can't seem to figure out why my code is not working, but I feel like it must be some obvious error. 我似乎无法弄清楚为什么我的代码无法正常工作,但是我觉得这一定是一些明显的错误。
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.image{
height:20px;
width:20px;
padding-bottom: 5px;
}
.info{
visibility: hidden;
display: block;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color:#555555;
background-color:#efefef;
width:235px;
padding: 3px 3px 3px 6px;
}
.image:hover .info{
visibility: visible;
}
</style>
<title>Info Button</title>
</head>
<body>
<img class ="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png" alt=""/>
<div class ="info">
Transcription: Type how your name sounds.<br/> Ex. Julio Santos => Who-le-o San-tos.
</div>
</body>
</html>
Thanks, 谢谢,
B 乙
Your mistake is in this selector .image:hover .info
, you're trying to find an .info
class nested inside .image
, but your DOM doesn't have them nested. 您的错误在于此选择器.image:hover .info
,您试图找到嵌套在.image
内的.info
类,但您的DOM没有嵌套它们。 Try using a sibling selector instead .image:hover + .info
. 尝试使用同级选择器代替.image:hover + .info
。
the only problem in your code was .image:hover .info{}
. 您的代码中唯一的问题是.image:hover .info{}
。 Change it to .image:hover ~ .info{}
or .image:hover + .info{}
将其更改为.image:hover ~ .info{}
或.image:hover + .info{}
.image{ height:20px; width:20px; padding-bottom: 5px; } .info{ display:none; font-family: 'Roboto', sans-serif; font-size: 12px; color:#555555; background-color:#efefef; width:235px; padding: 3px 3px 3px 6px; } .image:hover ~ .info{ display:block; }
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <img class ="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png" alt=""/> <div class ="info"> Transcription: Type how your name sounds.<br/> Ex. Julio Santos => Who-le-o San-tos. </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.