全高度不会覆盖

Question

直播网站 - http://uposonghar.com/new-video/

有一个嵌入式YouTube视频，如果你鼠标悬停在该视频上（视频中心）左侧出现Facebook + Twitter分享按钮，就像这样 -

但是只有当任何人鼠标悬停在嵌入式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;
}

Answer 1

我重写了你的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中，以便您可以测试这是否是您需要的。

Answer 2

因为共享视频覆盖类的高度。增加这个类的高度你会得到结果。像这样更改share-video-overlay的css

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

根据需要设置此css，并为share-video-overlay类height:500px;指定高度。 我相信它会奏效。