javascript - 全高对 Overlay 不起作用

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 中了这样您就可以测试这是否是您需要的。