Question

请查看this link。将光标悬停在任何电影缩略图上。你有没有注意到，所有的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;
}

Answer 1

在视频中添加透明边框似乎可以修复它

.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%;
}

Answer 2

这是因为在悬停时你添加了一个使容器2px更大的边框

为初始类提供边框的解决方案

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

第二个问题：

要使z-index工作，您需要为其提供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;
}

Answer 3

当鼠标悬停但你没有减小元素的大小时，你会添加一个边框。在W3C框模型中，元素的“高度”和“宽度”描述了块元素的内容的大小。填充和边框已添加。

某些浏览器允许您切换回“边框”大小调整模型：

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

然而，Internet Explorer不会，我不认为，明白这一点。也许IE9或10会理解：

  -ms-box-sizing: border-box;

（你会把它放在“.video”风格上。）

编辑 - 关于播放器上阴影的问题：没有阴影，因为阴影没有房间。如果您将播放器框设置为“position：absolute”，并相应地以某种方式调整内容（可能会给“包装”div一个大的顶部填充与播放器大小相同），那么您将看到一个阴影。

你真的应该使用像Firebug这样的东西来交互式地使用CSS。

Answer 4

对我来说，改变相应的＆lt; li>会更有意义。

Answer 5

我害怕你混淆了一点：

您的背景图片设置在#player-container上 - 如果您希望#player-container有阴影，则您需要为此背景添加额外的div。现在#player-container确实有阴影，但由于它是100％宽，并填充垂直空间，阴影不会显示。
您的播放器正好是853px x 480px，因此您必须将#player-container设置为这些尺寸（没有填充，没有边距，它们将被添加到宽度/高度）< / p>
将填充添加到包含div的额外内容中，该div也保留背景。
也（但不是那么重要）：#player-container有width:100% - 没有意义 - 默认为width:auto，因此#player-container会自动占用100％宽度

有css悬停效果的问题

5 个答案: