問題與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懸停效應

回答

相關問題