Question

所以我是编程的初学者，我在编写代码时遇到了麻烦。我不知道为什么悬停不起作用，并且想知道我的bug是什么。如标题中所述，我想在将鼠标悬停在信息图标上时显示一个小注释（就像您在在线表单上的输入部分旁边找到的那样）。我似乎无法弄清楚为什么我的代码不起作用，但我觉得它必定是一些明显的错误。

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

谢谢，

乙

Answer 1

您的错误出现在此选择器@Transactional中，您试图找到嵌套在.image:hover .info内的.info类，但您的DOM没有嵌套它们。请尝试使用兄弟选择器.image。

Answer 2

代码中唯一的问题是.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>

CSS悬停不起作用：在鼠标悬停在图标上时尝试显示说明

2 个答案: