css悬停效果有问题

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

对我来说，更改相应 的边距会更有意义。

Answer 3

那是因为在悬停时你添加了一个边框，使容器变大了 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 4

当鼠标悬停时添加边框，但不会减小元素的大小。元素的“高度”和“宽度”，在 W3C 盒子模型中，描述了块元素的 内容 的大小。内边距和边框已添加。

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

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

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

  -ms-box-sizing: border-box;

（您可以将其放在“.video”样式中。）

edit — 关于播放器上的阴影问题：没有阴影，因为没有空间 可以放置阴影。如果你让播放器框“位置：绝对”，并以某种方式相应地调整内容（也许给“包装器”div一个与播放器大小相同的大顶部填充），那么你会看到一个阴影。

您确实应该使用 Firebug 之类的工具来交互地使用 CSS。

Answer 5

恐怕你把事情搞混了：

• 你的背景图片设置在#player-container - 如果你想让#player-container 有一个阴影，你需要一个额外的包含这个背景的div。现在#player-container确实有阴影，但由于它是 100% 宽，并且填充了垂直空间，所以阴影不显示。

• 您的播放器正好是 853 像素 x 480 像素，因此您必须将 #player-container 设置为这些尺寸（无填充，无边距，它们将被添加到宽度/高度）

• 为包含额外内容的 div 添加填充，该 div 也包含背景。

• 也（但不是那么重要）：#player-container 有 width:100% - 这没有意义 - 默认是 width:auto，所以 #player-container 将自动占用 100% 的宽度