Display content when html image is hovered

Question

I am learning CSS and I am stuck in a specific task.

I want to have an icon next to some text. When I hover over the icon I want to display some other content which is initially hidden. The html code is:

     <div id="dropdown">
        dropdown
        <img id='icon' src="./icon.png" width="24px" height="24px">
        <div id="dropdown-content">
            <a href="">Link 1</a>
            <a href="">Link 2</a>
            <a href="">Link 3</a>
        </div>
    </div>

And CSS:

#dropdown {
    border:solid red;
}


#dropdown-content {
    display: none;
    position:absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index:1;
}


#icon:hover #dropdown-content {
    display: block;
}

My problem is that when I hover over the icon nothing happens.

Instead when I change the last CSS segment to:

  #dropdown:hover #dropdown-content {display:block;}

then everything works fine. I dont understand why this is happening. Thanks in advance.

Display content when html image is hovered

0 Answers0