Абсолютный элемент позиции видимый внутри переполнения: скрытый элемент

Мне нужно, чтобы элементы, расположенные внутри div с переполнением, были скрыты, однако эти элементы с абсолютным положением видны за пределами границ div с переполнением скрытых, я бы нуждался в них, чтобы они не были видимыми вообще. См. Код: http://jsfiddle.net/xEYJc/

Идея такова:

  • когда вы наведите курсор на "li", он будет скользить (внутри рамки iPhone) соответствующее изображение

  • это CSS для каждого изображения

    .first .search{
     position: absolute;
     width: 229px;
     margin: 94px 60px 40px -280px;
     -webkit-transition:margin-left 0.3s ease-out;
     -webkit-transition-delay:0.2s;
     }
  • и это CSS для контейнера:

    .iPhoneWrapper div{
     overflow-x: hidden;
     margin-left: 17px;
     }

Поскольку это означает, что ".search" позиционируется как абсолютный, видна вне "div" с скрытым переполнением, и мне нужно, чтобы они были скрыты и были видны только при перемещении.

1 ответ

Решение прост:

Добавить position: relative и overflow: hidden для вашего класса. .iPhoneWrapper, измененная скрипка: http://jsfiddle.net/xEYJc/1/

licensed under cc by-sa 3.0 with attribution.