问题与CSS悬停效应

请看看this link。将光标悬停在任何电影缩略图上。你有没有注意到，所有李元素都在向下移动？我该如何解决这个问题？问题与CSS悬停效应

另外，点击任何缩略图，玩家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; 
}

来源

2011-12-17 Tural Ali

我没有看到在铬有没有问题？ – ptriek 2011-12-17 00:40:47

@ptriek #player_container下没有盒子的影子，即使我把它设置在css文件中试图改变z-index，没有成功 – 2011-12-17 00:42:50

@TuralTeyyuboglu好的我会加到我的回答 – Pointy 2011-12-17 00:54:02

在视频中添加透明边框似乎解决它

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

来源

2011-12-17 00:23:23

固定，1 porblems，请看看在第二个探针。更新问题 – 2011-12-17 00:26:17

是，jQuery让这vissible上点击 – 2011-12-17 00:29:04

这是因为在悬停要添加边框，这使得容器的2px更大

溶液，得到初始类边框

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

问题二：

为了让你需要给它一个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; 
}

来源

2011-12-17 00:24:12 Ibu

你添加边框，当鼠标悬停但不降低元件的尺寸z-index的工作。的“高度”和元素的“宽度”，在W3C盒模型，描述的内容块元素的大小。填充和边框是加上即可。

有些浏览器允许你切换回“边界框”框规模模型：

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

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

-ms-box-sizing: border-box;

（你最好把那对“视频”的风格。）

编辑 —为与播放机上的阴影问题：有没有影子，因为没有房间为阴影。如果您的播放盒“的位置是：绝对的”，并相应地调整莫名其妙的内容（可能带来的“包装”的div一个大的顶部填充一样的播放器大小），然后你会看到一个影子。

你真的应该使用类似Firebug的交互与CSS发挥。

来源

2011-12-17 00:25:12 Pointy

对于我改变对相应<李缘>会更有意义。

来源

2011-12-17 00:27:10

恐怕你混了一点东西：

你的背景图片设置上#player-container - 如果你想#player-container有一个影子，你需要包含分区此额外背景。目前#player-container的确有影子，但由于它的宽度为100％，并且填充了垂直空间，所以阴影不显示。
您的播放器正是853px X 480像素，所以你必须设置#player-container准确这些尺寸（无填充，无保证金，他们将被添加到宽/高）
添加填充到额外的包含div，这也包含背景。
还（但不那么重要）：#player-container具有width:100% - 这是没有意义的 - 默认为width:auto，所以#player-container会自动采取100％的宽度

来源

2011-12-17 01:02:45 ptriek

问题与CSS悬停效应

回答

相关问题