1

#bg:hover #close{
  background-color: red;
}
<div id='bg'>
  <div id='content'>
    <button id='close'></button>
  </div>
</div>

Это всплывающее окно. #bg - темный полупрозрачный фон на все окно браузера, #content - собственно окно с контентом и #close - кнопка закрытия. Как сделать так, чтобы #close окрашивался в красный только когда курсор выходит за #content. Сейчас он срабатывает везде.

4 ответа 4

4

#bg {
  background: rgba(0,0,0,.5);
  position: absolute;
  width: 100%;
  height: 100%;
}
#bg:hover #close {
  background: red;
}

#content:hover #close {
  background: initial;
}

#content {
  width: 300px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id='bg'>
  <div id='content'>
    <button id='close'>Закрыть</button>
  </div>
</div>

Повесит ховер на "#content #close". И лучше не стилизовать по id

1
  • Да, это рабочий вариант, но по сути это перезапись bg. Я так понял он хочет совсем его отключить. 31 окт 2017 в 17:19
2

Можно переопределить фон по умолчанию другим селектором:

#bg:hover #close { background: red;}
#content:hover #close {background: initial;}
#content{border: solid 1px silver}
<div id='bg'>
  <div id='content'>
    <button id='close'>Close</button>
    <p>Content
  </div>
  <p> Background
</div>

1

Еще можно сделать обратный вариант, так как у тебя dg на всю страницу

html,
body {
  width: 100%;
  height: 100%;
}

#bg {
  width: 100%;
  height: 100%;
  background-color: #444;
}

#content {
  width: 100px;
  height: 100px;
  background-color: #ddd;
}

#content:hover #close {
  background-color: #ddd;
}

#close {
  background-color: red;
}
<div id='bg'>
  <div id='content'>
    <button id='close'>button</button>
  </div>
</div>

0

В CSS - не получится. Это свойство наследуется всеми потомками. Можно реализовать только средствами JS путем подвешивания классов при наведении на псевдородитеся.

5
  • @Air, подобные эмоции излишни. be nice
    – vp_arth
    31 окт 2017 в 17:22
  • @vp_arth, согласен...
    – Air
    31 окт 2017 в 17:25
  • 1
    @Air Тема звучит как: "Сделать так, чтобы :hover не срабатывал на дочернем элементе" Почитайте мат часть, дочерние объекты наследуют свойства родителя и можно заменить их но не отключить. В чем я не прав? 31 окт 2017 в 17:32
  • @RuslanSemenov, ты прав, но выйти из сутуации можно... если бы не возможно было вообще, то даже в этом случае, подобный ответ, как твой, желательно реализовать, как коммент....
    – Air
    31 окт 2017 в 17:42
  • к сожалению, в этом ответе не содержится решения проблемы
    – mymedia
    31 окт 2017 в 19:51

Ваш ответ

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

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