CSS hover is not working: trying to display a description when hovering over an icon

Question

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

Try this hope this will help you http://stackoverflow.com/questions/14149360/text-on-image-mouseover — kevin, May 04 '17 at 05:08

score 1 · Answer 1 · answered May 04 '17 at 05:08

1

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. Try using a sibling selector instead .image:hover + .info.

answered May 04 '17 at 05:08

Brett East

4,022
2
20
31

score 0 · Answer 2 · answered May 04 '17 at 05:33

the only problem in your code was .image:hover .info{} . Change it to .image:hover ~ .info{} or .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 hover is not working: trying to display a description when hovering over an icon

2 Answers2