Проблемы с переходом CSS - PullRequest
Новая
       35

Проблемы с переходом CSS

2 голосов
/ 24 марта 2012

Я пытаюсь настроить простой переход CSS, при котором маска над элементом и когда пользователь наводит курсор на элемент, непрозрачность маски становится равной 0, и элемент полностью виден. У меня проблема в том, что когда я помещаю маску в элемент, например: 

<div class="tile">
   Home
   <div class="mask"></div>
</div>

<div class="tile">
   About
   <div class="mask"></div>
</div>

Маска перемещается вниз к другому элементу. Так, например, маска из плитки «home» перемещается вниз к плитке about, а маска из плитки «about» перемещается вниз к тому, что будет после этого. Как это исправить? Спасибо!

Вот js скрипка этого: http://jsfiddle.net/5bL8H/

1 Ответ

1 голос
/ 24 марта 2012

Вы можете сделать это очень легко, используя магию абсолюта внутри: 

.tile {position:relative;}
.tile .mask {position:absolute;left:0;right:0;top:0;bottom:0;}

Вы также можете удалить высоту и ширину - об этом позаботятся правое и нижнее значения.

Пример: http://jsfiddle.net/5bL8H/2/

...