CSS -> 悬停效果不起作用

Question

我的 CSS 代码没有检测到，如果我的光标在 div 上：但是如果我使用浏览器开发工具激活 "hover"，它就可以工作。

解释：Div显示，如果我越过一个按钮，但是div隐藏，如果我离开按钮...

我的代码：

.profilanzeige2 {
  width: 20%;
  float: right;
  position: absolute;
  text-align: center;
  padding: 10px;
  top: -250px;
  right: 0px;
  z-index: -1;
  border-radius: 0px 0px 10px 10px;
  color: white;
  /* border: 1px solid #797979; */
  background-image: none;
  background: #16b751;
  background: -moz-linear-gradient(top, #16b751 0%, #19ad46 100%);
  background: -webkit-linear-gradient(top, #16b751 0%,#19ad4619ad46 100%);
  background: linear-gradient(to bottom, #16b751 0%,#19ad46 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16b751', endColorstr='#19ad46',GradientType=0 );
  transition: top 1s ease-in-out;
  border: 1px solid #e7e7e7;
}

#profilanzeige:hover ~ #profilanzeige2, .profilanzeige2:hover {
    top: 54px !important;
}

#profilanzeige:hover + #profilanzeige2, .profilanzeige2:hover {
    top: 54px !important;
}

.profil:hover ~ #profilanzeige2, #profilanzeige2:hover {
    top: 54px !important;
}

.profil:hover + #profilanzeige2, #profilanzeige2:hover {
    top: 54px !important;
}

<div class="profilanzeige2" id="profilanzeige2">
        <img src="https://ftimg.de/images/2017/03/02/5e2c4f6af5024d26bb95d074a3ed9a86.png">

        <p class="profil-name"><?php echo $user['icname']; ?></p>


        <a href="profil.php"><button type="button" class="btn btn-default" class="Profilanzeigen">
          Profil anzeigen
        </button></a>

        <a href="logout.php"><button type="button" class="btn btn-default" class="Abmelden" href="logout.php">
          Abmelden
        </button></a>
      </div>

Answer 1

你有

<div class="profilanzeige2" id="profilanzeige2">

with class profilanzeige2 但 :hover 在 #profilanzeige

为了可读性，可以改进的另一件事是 class 和 div 中的 id 具有不同的名称。

Answer 2

已修复，我的 z-index 为 -1。我将其更改为 0 以上，一切正常。

CSS -> 悬停效果不起作用

CSS -> Hover effect dosen't work

html

css

browser

hover

effect