html - 将文本或 Logo 定位在鼠标悬停时消失的 div 上

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>