Наличие проблемы с эффектом наведения CSS - PullRequest
Новая
       13

Наличие проблемы с эффектом наведения CSS

0 голосов
/ 17 декабря 2011

Пожалуйста, посмотрите на эту ссылку .Наведите курсор на любой эскиз фильма.Вы заметили, что все элементы li движутся вниз?Как я могу решить эту проблему?

Кроме того, нажмите на любой эскиз, игрок Div будет скользить вниз.под #player_container нет тени блока, даже если я установил ее в css файлах 

#player_container{
    display:none;
    height:510px;    
    width: 100%;
    background-image: url(images/bg/bg_tile.jpg);
    margin-top: -510px;
    padding-top: 20px;
        -moz-box-shadow: 0px 10px 5px #888;
    -webkit-box-shadow: 0px 10px 5px #888;
    box-shadow: 0px 10px 5px #888;
}

Ответы [ 5 ]

3 голосов
/ 17 декабря 2011

На видео добавьте прозрачную рамку, чтобы исправить это 

.video {
    border: 1px solid transparent;
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

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

<div style="display: block;" class="gradient sh" id="player_container">

    <div class="jquery-youtube-tubeplayer" id="player">

    <div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&amp;autohide=1&amp;controls=1&amp;rel=0&amp;fs=1&amp;wmode=transparent&amp;showinfo=0&amp;modestbranding=0&amp;start=0&amp;theme=dark&amp;color=red&amp;enablejsapi=1&amp;origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
    <div class="bottomSpan"></div>    
</div>

, и добавьте тень от этого поля на 

.bottomSpan {
    box-shadow: 0 10px 5px #888888;
    display: block;
    height: 17px;
    position: absolute;
    width: 100%;
}
1 голос
/ 17 декабря 2011

Для меня изменение поля для соответствующего

будет более разумным.
1 голос
/ 17 декабря 2011

Вы добавляете границу при наведении курсора мыши, но не уменьшаете размер элемента. «Высота» и «ширина» элемента в блочной модели W3C описывают размер содержимого блочного элемента. Заполнение и граница добавляются к этому.

В некоторых браузерах вы можете переключиться обратно к модели размеров рамки "border-box": 

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

Однако Internet Explorer, я думаю, не поймет этого. Может быть, IE9 или 10 поймут: 

  -ms-box-sizing: border-box;

(Вы бы поместили это в стиль ".видео".)

изменить & mdash; Что касается проблемы с тенью на плеере: тени нет, потому что для тени нет комнаты . Если вы сделаете поле для проигрывателя «position: absolute» и соответственно откорректируете контент (возможно, даете div «wrapper» с большим верхним отступом, равным размеру проигрывателя), тогда вы увидите тень.

Вы действительно должны использовать что-то вроде Firebug для интерактивной игры с CSS.

1 голос
/ 17 декабря 2011

Это потому, что при наведении курсора вы добавляете границу, которая увеличивает размер контейнера на 2 пикселя

решение дать начальному классу границу 

.video {
    border: 1px solid #fff
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

Вторая проблема:

Чтобы заставить работать z-индекс, нужно присвоить ему position:relative свойство 

#player_container {
   display: none;
   height: 510px;
   width: 100%;
   background-image: url(images/bg/bg_tile.jpg);
   padding-top: 20px;
   -moz-box-shadow: 0px 10px 5px #888;
   -webkit-box-shadow: 0px 10px 5px #888;
   box-shadow: 0px 10px 5px #888;
   z-index: 2;
   position: relative;
}
0 голосов
/ 17 декабря 2011

Боюсь, что вы немного смешиваете:

  • Ваше фоновое изображение установлено на #player-container - если вы хотите, чтобы #player-container имела тень, вы 'Мне понадобится дополнительный, содержащий div для этого фона.Прямо сейчас #player-container имеет тень, но, поскольку она имеет ширину 100% и заполняет вертикальное пространство, тень не отображается.

  • Ваш игрок ровно 853px x 480px, поэтомувам нужно будет установить #player-container именно на эти размеры (без отступов, без полей, они будут добавлены к ширине / высоте)

  • Добавить заполнение для дополнительного содержащего div,который также содержит фон.

  • также (но не так важно): #player-container имеет width:100% - это не имеет смысла - по умолчанию это width:auto, поэтому #player-container будетавтоматически брать 100% ширину

...