Question

我需要在悬停类别上显示“隐藏猫” div

#html

<li  class="menu-button"><a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats">
<ul>
    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
</ul>
</div>

#css我尝试了，但是没有用

    #categories:hover + #hidden-cats {
        display: block;
    }
    #categories:hover > #hidden-cats {
        display: block;
    }
    #categories:hover  #hidden-cats {
        display: block;
    }
    #categories:not(:hover) + #hidden-cats {
        display: none;
    }

Answer 1

id：hidden-cats和class：menu-button是同级的，因此CSS应该是这种方式。

#hidden-cats {
  display: none;
}

.menu-button:hover+#hidden-cats {
  display: block;
}

<li class="menu-button">
  <a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats">
  <ul>
    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
  </ul>
</div>

Answer 2

#categories位于<li>元素内，因此#hidden-cats不能成为其下一个兄弟元素，并且在这种情况下不能使用+选择器。您必须更改HTML结构。您可以在id="categories"上移动<li>吗？

这将起作用：

#categories:hover + #hidden-cats {
    display: block;
}

Answer 3

使用已编写的当前样式，您可以将隐藏的猫移动到li元素内部

<ul>
        <li  class="menu-button">
            <a href="categories/" class="menu-button" id="categories">cats</a>
                <div id="hidden-cats">
                <ul>
                    <li class="cats-li"><img src="https://i.imgur.com/aTsiQPR.png" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
                </ul>
                </div>
            </li>
    </ul>

Answer 4

尝试一下

img {
  width: 30px;
}
.cats {
  display: none;
}
.menu-button:hover~.cats{
  display: block;
}

<li  class="menu-button">
<a href="categories/" class="menu-button" id="categories">cats</a></li>

<div id="hidden-cats" class="cats">
<ul>
    <li class="cats-li"><img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE" class="cats-icon"><a href="" class="cats-a">cat 1</a></li>
</ul>
</div>

尝试在悬停时显示div，但无济于事

4 个答案: