gpt4 book ai didi

html - CSS 悬停不起作用 : trying to display a description when hovering over an icon

转载 作者:太空宇宙 更新时间:2023-11-04 08:46:04 24 4
gpt4 key购买 nike

所以我是编程的初学者,我在使我的代码工作时遇到了问题。我不知道为什么悬停不起作用,很想知道我的错误是什么。如标题中所述,我想在将鼠标悬停在信息图标上时显示一个小注释(就像您在在线表单的输入部分旁边找到的那些)。我似乎无法弄清楚为什么我的代码不起作用,但我觉得这一定是一些明显的错误。

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

谢谢,

B

最佳答案

您的错误在于此选择器 .image:hover .info,您试图找到嵌套在 .image 中的 .info 类>,但您的 DOM 没有嵌套它们。尝试使用兄弟选择器来代替 .image:hover + .info

关于html - CSS 悬停不起作用 : trying to display a description when hovering over an icon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43774269/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com