CSS Переход путаница при переходе элемента внутри своего родителя

Учитывая следующий HTML и CSS:CSS Переход путаница при переходе элемента внутри своего родителя

transitions2.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>CSS Transformations</title> 
    <link rel="stylesheet" href="transitions2.css"> 
    </head> 
    <body> 
    <div class="wrap"> 
     <div class="box"></div> 
    </div> 
    </body> 
</html>

transitons2.css

.wrap { 
    margin: 0 auto; 
    padding: 15px; 
    width: 850px; 
    height: 300px; 
    box-shadow: 0 0 20px rgba(0,0,0,.5); 
} 

.box { 
    width: 25%; 
    height: 200px; 
    border-radius: 8px; 
    background: #4682B4; 
    -webkit-transition-duration: 1s; 
} 

.wrap:hover .box{ 
    background: #F08080; 
    margin-left: 75%; 
}

Мои проблема связана с последней декларацией, которая выбирает .box в .wrap: hover. Как это работает? Почему также не переносится Wrap? Когда я вставляю в родительский элемент .box, перемещается только .box. Что вызывает такое поведение?

источник

2013-07-02 Senjai

Причина, по которой родитель не движется, состоит в том, что вы фактически являетесь , а не, выбрав его. Ваш код выбирает дочерний класс wrap с именем box, когда событие hover срабатывает и вносит изменения в этот элемент.

Если вы хотите, чтобы родительский элемент перемещался вместо дочернего элемента, удаление выделения для дочернего класса box необходимо, но приведет к уродливым результатам. Приведенный выше код работает так, как ожидалось.

Кстати, код также можно записать в виде:

.wrap:hover > .box 
{ 
    background: #F08080; 
    margin-left: 75%; 
}

на мой взгляд, делает его более четким, чтобы увидеть, что происходит, но это мое предпочтение.

источник

2013-07-02 00:32:54

.wrap:hover .box так же, как говорят

Когда я парить над .wrap, .box будет делать следующее.

Я действительно нахожу `.wrap: hover> .box немного менее очевидным, но это только я.

Существует также SO POST - другой пример, который также работает.

ul:not(:hover)>li.active { background: black; } 
ul>li.active:not(:hover) { background: none; } 
This has a few conditions: 

A browser which supports the :not pseudo-tag 
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any list.

источник

2013-07-02 01:49:43

CSS Переход путаница при переходе элемента внутри своего родителя

ответ

Смежные вопросы