Html 用CSS隐藏Div不起作用？

那么根据这个

我应该能够用CSS隐藏一个div并显示在hover上，但由于某些原因，我在我放置它的图像上没有得到相同的悬停效果，而该图像恰好位于本页的上角

有没有关于为什么它现在会起作用的建议

这是我使用的CSS

.user-image {
  float:none !important;
  right: 0;
  margin-right: 4.5%;
  position: absolute;
  z-index: 100;
}

.user-image img {
  width: 65px !important;
  height: 65px !important;
  margin-top: -15px;
  border: 2px solid white;
  border-radius: 32px;
}

.user-image li {
  list-style: none;
  background-color: white;
  display: none;
  padding: 10px;
  width: 100px;
  margin-left: -35px; 
}

.user-image img:hover + .user-image li {
  display: block;
}

这是HTML

<div class="user-image">
<img src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo">
<li> Test </li>
<li> Test 2 </li>
</div>

试验
测试2

对您的代码做一些类似这样的更改

用此代码替换您的代码

    <div class="user-image">
    <a><img  src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo"></a>
    <div class="user-image">
        <li> Test </li>
        <li>Test 2 </li>
    </div>

如有必要，进行适当的更改

祝你好运这行不通：

.user-image img:hover + .user-image li {
  display: block;
}

您正在选择任何

li

，它是

.user image

的后代，是

img:hover

的兄弟，它是

.user image

的后代

我不能给你一个实际的解决方案，因为我们需要看到php标签返回的html，但是如果你的

img

在隐藏的

li

中，那么你应该在

li

悬停时隐藏/显示，而不是

img

---

更新

根据您提供的html，只需从选择器中删除第二个

。用户图像

：

.user-image img:hover + li {
  display: block;
}

---

您可以使用

opacity

来完成此操作，如下面的示例所示

。用户图像{
不透明度：0；
背景色：红色；
}
.用户图像：悬停{
不透明度：1；
}

请同时包含HTML。最好是用提琴或片段。标记：寻求调试帮助的问题（“为什么此代码不工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。-请将您的问题包含足够的代码以重现问题。@Roope在那里我修复并添加了它HTML@BSMP这里添加了HTMLI编辑的问题，我想让它隐藏起来，这很容易，但在悬停显示本身。我添加的第一个链接将带您进入stackoverflow示例，了解它们是如何工作的，但尽管我遵循了这些步骤，但我无法复制它。转到fiddle.com并制作一个fiddle代码。然后发送链接。您想在悬停时隐藏特定的div，还是在鼠标后永久隐藏它悬停。我想让它在我基本上悬停在img上时出现。我可以向你展示，然后按住，让我重新编辑。我添加了你想看到的HTML，它实际上起了作用，只有一个li[列表项]显示。我只是添加了另一个li来制作另一个节目吗？我找到了一个，我只是在下面添加了第二个代码版本，看起来一样，但添加了另一个+li，效果很好。我正计划添加链接，这样隐藏链接仍然允许点击它们。

.user-image img:hover + li {
  display: block;
}