Повлияет ли z-index на то, что элементы «зависают» над ними?

Question

Повлияет ли z-index на то, что элементы «зависают» над ними?

0

Если у меня есть div, у которого есть другой div под ним, будет ли активировано базовое состояние hover div когда курсор находится над верхним div? Предположим, что верхний div имеет z-index 5, а другой div z-index равен 1.

biddano 21 март 2014, в 17:32

Источник

0

может быть, скрипта или какой-то код, который вы попробовали, может помочь нам точно понять проблему
Mehmet Eren Yener 21 март 2014, в 15:48

Теги:

html

css

dom

2 ответа

1

Просто взбив что-то быстро.

Элемент внутри другого элемента с :hover будет работать (даже при отрицательном z-index).

Элемент вне элемента с отрицательным z-index не будет работать.

CodePen | JsFiddle

HTML:

<div class="box">
  <div class="inside">
  </div>
</div>
<br><br>
<div class="box">
</div>
<div class="outside"></div>

CSS:

.box{
  position:relative;
  height:250px;
  width:250px;
  opacity:.4;
  background:red;
}

.outside, .inside{
  background:blue;
  height:100px;
  width:100px;
  position:absolute;
  z-index:-5;
}

.outside{
  top:400px;
}

.inside:hover{
  opacity:0;
}

.outside:hover{
  opacity:0;
}

Albzi 21 март 2014, в 13:40

Ещё вопросы

может быть, скрипта или какой-то код, который вы попробовали, может помочь нам точно понять проблему

michaelward82 · Accepted Answer · 2014-03-21T13-35-00.000Z

Короткий ответ: нет.

В качестве примера возьмем следующий код:

HTML:

<div id="one">one</div>
<div id="two">two</div>

CSS:

div {
    position: absolute;
    height: 300px;
    width: 300px;
}
div:hover {
    background-color: yellow !important;
}
div#one {
    top: 0;
    left: 0;
    background-color: red;
    z-index: 10;
}
div#two {
    top: 150px;
    left: 150px;
    background-color: green;
    z-index: 1;
}

Наклон никогда не активируется на div#one когда div#two зависает в области перекрытия.

http://jsfiddle.net/Yff7Q/