CSS懸停功能不起作用：將鼠標懸停在圖標上時嘗試顯示說明

Question

因此，我是編程的初學者，但使我的代碼無法正常工作。 我不知道為什么懸停無法正常工作，很想找出我的錯誤所在。 如標題中所述，將鼠標懸停在信息圖標上時，我想顯示一個小注釋（例如您在在線表單的輸入部分旁邊找到的圖標）。 我似乎無法弄清楚為什么我的代碼無法正常工作，但是我覺得這一定是一些明顯的錯誤。

<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

您的錯誤在於此選擇器.image:hover .info ，您試圖找到嵌套在.image內的.info類，但您的DOM沒有嵌套它們。 嘗試使用同級選擇器代替.image:hover + .info 。

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 個解決方案

解決方案1
1 2017-05-04 05:08:53

解決方案2
0 2017-05-04 05:33:46

CSS懸停功能不起作用：將鼠標懸停在圖標上時嘗試顯示說明

問題描述

2 個解決方案

解決方案1 1 2017-05-04 05:08:53

解決方案2 0 2017-05-04 05:33:46

解決方案1
1 2017-05-04 05:08:53

解決方案2
0 2017-05-04 05:33:46