全高不覆蓋的工作

直播定點http://uposonghar.com/new-video/全高不覆蓋的工作

有一個嵌入式YouTube影片，如果將鼠標懸停在該視頻（視頻中）出現在左側的Facebook + Twitter的分享按鈕，像這 enter image description here

但是，只有當任何人在嵌入的YouTube視頻盒的中心部分，而不是整個部分的鼠標。我想像任何人在鼠標懸停在視頻框（不管在哪裏）共享按鈕出現時的樣式，共享按鈕將是垂直對齊中心的任何視頻框高度。

我的代碼 - 因爲共享視頻覆蓋類的高度 HTML的

<div id="video-container"> 
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe> 
    <ul class="share-video-overlay" id="share-video-overlay"> 
    <li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D-Jkd9GDSyPc">Facebook</a></li> 
    <li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&amp;url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li> 
    </ul> 
</div>

CSS-

#share-video-overlay { 
position: relative; 
top: -225px; 
list-style-type: none; 
display: block; 
opacity: 0; 
filter: alpha(opacity=0); 
-webkit-transition: opacity .4s, top .25s; 
-moz-transition: opacity .4s, top .25s; 
-o-transition: opacity .4s, top .25s; 
transition: opacity .4s, top .25s; 
z-index: 500; 
} 

#share-video-overlay:hover { 
opacity:1; 
filter:alpha(opacity=100); 
} 

.share-video-overlay li { 
margin: 5px 0px 5px 0px; 

} 
#facebook { 
color: #ffffff; 
background-color: #3e5ea1; 
width: 70px; 
padding: 5px; 
} 

.facebook a:link, .facebook a:active, .facebook a:visited { 
color:#fff; 
text-decoration:none; 
} 

#twitter { 
background-color:#00a6d4; 
width: 70px; 
padding: 5px; 
} 

.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { 
color:#FFF; 
text-decoration:none; 
}

來源

2014-02-19 arifix

我重寫了你的CSS，也許這就是你需要的？

#video-container { 
    display: block; 
    position: relative; 
    width: 600px; //set the video container to the same width/height as the embedded video 
    height: 400px; 
} 
#video-container:after { 
    clear: both; 
} 

#share-video-overlay { 
    display: none; 
    position: absolute; //absolute positioning to force the element over the iframe 
    lef: 0; 
    top: 225px; 
} 

#video-container:hover #share-video-overlay { 
    display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html 
} 

.share-video-overlay li { 
    margin: 5px 0px 5px 0px; 
} 

#facebook { 
    color: #ffffff; 
    background-color: #3e5ea1; 
    width: 70px; 
    padding: 5px; 
} 

.facebook a:link, .facebook a:active, .facebook a:visited { 
    color:#fff; 
    text-decoration:none; 
} 

#twitter { 
    background-color:#00a6d4; 
    width: 70px; 
    padding: 5px; 
} 

.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { 
    color:#FFF; 
    text-decoration:none; 
}

簡而言之：將容器設置爲與YouTube視頻的寬度/高度相匹配，然後使用絕對定位來定位疊加層。由於它位於視頻容器內部，因此它將自己定位在容器的邊界內。

並且：將懸停設置在視頻容器上，而不是疊加層。如上所述，覆蓋圖內部的容器爲，因此您可以輕鬆地將覆蓋圖顯示在容器上的懸停上。（#video-container:hover #share-video-overlay { }）

我已將該示例放在Fiddle中，以便您可以測試這是否是您需要的。

來源

2014-02-19 11:45:08

它。增加這個班級的高度，你會得到結果。只要你想更改共享視頻覆蓋的CSS這樣

top:-435px; 
padding-top:215px;

設置這個CSS並給予高度共享視頻 - 疊加類height:500px;。我相信它會工作。

來源

2014-02-19 11:44:32 SPViradiya

全高不覆蓋的工作

回答

相關問題