Мой код CSS не обнаруживает, если мой курсор над div: Но если я активно "завис" с помощью инструмента разработчика браузера, это работает.

Объясните: 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>
0
Ben Klingeler 1 Апр 2017 в 18:37

2 ответа

Лучший ответ

У тебя есть

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

С классом profilanzeige 2 , но с :hover находится на # profilanzeige

Еще одна вещь, которая может быть улучшена для удобства чтения, - это иметь разные имена класса и id в div.

1
Bakudan 1 Апр 2017 в 16:03

Fixxed, у меня был z-index на -1. Я изменяю его на более 0 и все работает нормально.

0
Ben Klingeler 1 Апр 2017 в 19:09