Question

所以根据这个Link

我应该可以隐藏带有CSS的div并显示在悬停状态但由于某种原因我没有在我放在上面的图像上获得相同的悬停效果，而这正好位于此{的顶角{3}}

有关为什么它现在可能有效的任何建议？

这是我使用过的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>

Answer 1

这不会起作用：

.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：

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

Answer 2

您可以使用opacity来完成此操作，如下面的示例

.user-image {
    opacity: 0;
    background-color: red;
}
.user-image:hover {
    opacity: 1;
}

<div class="user-image">
    <a href="">Test hover thing here</a>
</div>

Answer 3

以类似的方式对代码进行一些更改

使用此代码替换您的代码。

<?php
require ('sql.php');
$order = "SELECT * FROM release";
$result = mysqli_query($con, $order);

    while($row = mysqli_fetch_assoc($result)) {
        echo "update: " . $row["update"];
    }
mysqli_close($con);
?>

和风格

    <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>

CLICK HERE TO SEE YOUR CODE IN FIDDLE

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

gud luck

用CSS隐藏Div无法正常工作？

3 个答案: