Question

我的CSS代码无法检测，如果我的光标在div上：但如果我处于活动状态＆＃34; hover＆＃34;使用浏览器开发人员工具，它可以工作。

解释：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">

上课 profilanzeige 2 ，但:hover位于＃ profilanzeige

为了便于阅读，可以改进的另一件事是在div中使用不同的类名和id。

Answer 2

Fixxed，我的z-index为-1。我把它改为0以上，一切正常。

CSS - ＆gt;悬停效果不起作用

2 个答案: