0

Есть элемент

.myclass {
  background-color: #28292d;
  font-family: Roboto, "sans-serif", Arial;
  border-width: 0px;
  border-style: outset;
  border-radius: 3px;
  position: absolute;
  bottom: -220px;
  right: 0px;
  transition: 0.5s;
  width: 500px;
  height: 250px;
  color: #ffdd47;
}

.myclass:hover {
  bottom: 0px;
}
<div class="myclass">
  <div class="push">
    <!--код!-->
  </div>
  <!--код!-->
</div>

Соответственно, при наведении на элемент мышкой, он всплывает из-под страницы полностью

Дочерний элемент класса "push" будет находиться вне этого элемента, чуть выше

Как сделать так, чтобы к нему не применялся :hover родительского элемента?

То есть, при наведении мыши на дочерний элемент, родительский и дочерний элемент не всплывали?

2

1 ответ 1

2

В случае, если дочерний элемент вообще не должен никак реагировать на события мыши, то можно использовать на нем pointer-events: none;

.container {
  background-color: #28292d;
  position: relative;
  width: 200px;
  height: 80px;
  color: #ccc; 
}

.container:hover {
 background-color: red;
}

.item {
  width: 80px;
  height: 80px;
  position: absolute;
  right: -40px;
  bottom: -40px;
  background-color: green;
  pointer-events: none;
  opacity: 0.7;
}
<div class="container">
container
    <div class="item">
        Элемент внутри container
    </div>
<!--код!-->
</div>

7
  • @humster_spb Как это ничего не измениться? Судя по задаче, внутренний элемент вынесен за пределы блока и необходимо, чтобы при наведении на этот элемент, блок не анимировался, а анимировался только если навели на сам блок. Я наехал частью внутреннего блока на родителя, чтобы продемонстрировать как это событие мыши реагирует на внутренний элемент за пределами родителя. Возможно я не так понял вопрос, но в том случае что я описал, мы получаем необходимый результат
    – Get-Web
    12 апр 2018 в 13:14
  • а, не, всё ок - сорри ) это я смотрел Ваш пример, а думал про всплытие 12 апр 2018 в 13:17
  • Да, почти помогло) И я так понимаю, нет способов оставить только клик в событиях мыши 12 апр 2018 в 13:17
  • @АндрейГригорьев Если вы более точно опишите задачу, мы вам подскажем, иначе видите мы сами друг друга не понимаем.
    – Get-Web
    12 апр 2018 в 13:18
  • Вы абсолютно правильно поняли задачу) Дочерний элемент - это всплывающее сообщение с крестиком закрытия. Больше не на что там нажимать. Если б можно было нажать на крестик, чтоб не всплывало при этом все - было бы здорово) 12 апр 2018 в 13:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.