Question

<section id="fbsection4"> <!--section with videos filling page-->
<div class="block">
<div id="bl-main" class="bl-main">

<section>
<iframe width="599" height="400"src="https://www.youtube.com/embed/Qyq29EaJD0M?rel=0"class="bl-box fancybox-effects-d" title="" ></iframe>
</section>
</div>
</div>
</section>

好的，所以我有一个充满视频内容的页面，它的投资组合页面上有9个视频。正如上面所述，我这里只有1个视频。在打开页面时，它看起来是空白的，但鼠标悬停在视频上会开始显示。一切正常。

我想知道的是，我可以在每个视频上放置一些文字或图像，这些视频会在页面加载时显示但在鼠标悬停时消失（视频在鼠标悬停时显示）但在视频播放时不会重新出现。实际上，在页面刷新之前不应该重新出现。

Answer 1

试试这个（半透明叠加层）：

<section id="fbsection4"> <!--section with videos filling page-->
    <div class="block">
        <div id="bl-main" class="bl-main">
            <section style="position: relative;">
                <iframe width="599" height="400"src="https://www.youtube.com/embed/Qyq29EaJD0M?rel=0"class="bl-box fancybox-effects-d" title="" ></iframe>
                <div style="position: absolute; z-index: 2; left: 0; top: 0; width: 559px; height: 20px; padding: 190px 20px; background-color: rgba(255,255,255,0.5); text-align: center;" onmouseover="this.style.display='none';">
                    [your text here]
                </div>
            </section>
        </div>
    </div>
</section>

为了澄清一下，我已经在style="position: relative;"上放置了<section>，我在iframe之后添加了一个div。其余的没有改变（除了一些缩进因为我无法帮助自己;））。

- 编辑 -

正如所指出的，内联CSS通常是一件坏事。在许多情况下也是Javascript，尽管在这种情况下，我认为简单性和小代码足迹超过了丑陋。但在这里我是如何将它分开的：

<强> CSS

#bl-main section {
    position: relative;
}
.overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 559px;
    height: 20px;
    padding: 190px 20px;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
}

<强>的Javascript

// this relies on jQuery which you can download from jQuery.com
$(document).ready(function() {
    $('.overlay').mouseover(function() {
        $(this).hide();
    });
});

<强> HTML

<section id="fbsection4"> <!--section with videos filling page-->
    <div class="block">
        <div id="bl-main" class="bl-main">
            <section>
                <iframe width="599" height="400"src="https://www.youtube.com/embed/Qyq29EaJD0M?rel=0"class="bl-box fancybox-effects-d" title="" ></iframe>
                <div style="overlay">
                    [your text here]
                </div>
            </section>
        </div>
    </div>
</section>

Answer 2

这里的想法是为您的视频设置一个容器元素。在该容器内，您两者叠加内容和视频。

我们使用JavaScript来确保叠加层保持隐藏，除非页面刷新。

$('.video-overlay').on('mouseover', function() {
  $(this).css('display', 'none');
});

.video-wrapper {
  display: inline-block;
  position: relative;
}
.video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: white;
  text-align: center;
  background-color: orange;
}
.faux-video {
  width: 300px;
  height: 200px;
  color: white;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper">
  <div class="video-overlay">
    Some text or image here.
  </div>
  <div class="faux-video">[video placeholder]</div>
</div>

Answer 3

您只能使用CSS执行此操作。您可以在视频顶部叠加div。

结果：http://jsfiddle.net/MadalinaTn/kNMnr/2055/

CSS

#video_overlay {
    position:absolute;
    float:left;
    width:600px;
    min-height:405px;
    background-color:rgba(255,255,255,0.98);
    color:#000;
    text-align:center;
    z-index:300000;
}
#fbsection4:hover #video_overlay{
  display:none;
}

HTML：

<section id="fbsection4"> <!--section with videos filling page-->
<div class="block">
<div id="bl-main" class="bl-main">
<div id="video_box">
    <div id="video_overlay"> Lorem ipsum</div>
    <div>
  </div>
<section>
<iframe width="599" height="400"src="https://www.youtube.com/embed/Qyq29EaJD0M?rel=0"class="bl-box fancybox-effects-d" title="" ></iframe>
</section>
</div>
</div>
</section>

将文本或徽标放在鼠标上消失的div上

3 个答案:

- 编辑 -