Html 将文本或徽标放置在div上，鼠标悬停在div上会消失

好的，我有一个充满视频内容的页面，这是一个包含9个视频的公文包页面。如上所述，我这里只有一个视频。在打开页面时，它看起来是空白的，但在鼠标上方，视频开始出现。一切正常

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

试试这个（半透明覆盖）：

Javascript

#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;
}

HTML

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

[此处为您的文字]

这里的想法是为您的视频提供一个容器元素。在该容器中，您拥有覆盖内容和视频

我们使用JavaScript确保覆盖层保持隐藏，除非页面刷新

$（'.video overlay'）。在（'mouseover'，function（）上{
$（this.css（'display'，'none'）；
});
。视频包装器{
显示：内联块；
位置：相对位置；
}
.视频叠加{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
颜色：白色；
文本对齐：居中；
背景颜色：橙色；
}
.人造视频{
宽度：300px；
高度：200px；
颜色：白色；
背景色：红色；
}

这里有一些文字或图像。
[视频占位符]
您只能使用CSS来完成此操作。您可以在视频顶部覆盖一个div

结果:

css

html:


乱数假文
Overlay应该一直隐藏，直到页面刷新为止。@hungerstar我在问题中没有看到这一点。我看到“将在页面加载时被看到，但在鼠标移过时消失”。最后一行，“事实上，在页面刷新之前，它不应再次出现。”@hungerstar哦，对不起。也许他更新了问题。我会检查代码，我想…@hungerstar，无论如何，在视频开始后，覆盖层不再可见。对内联样式和JS有点畏缩。是的，值得一提的是，我选择了快速简单的解决方案-我倾向于在尝试新东西时这样做，直到它起作用，在这一点上，我将JS和CSS分开。我仍然认为使用“onmouseover”等代替jQuery（thing.on（event，function）是有道理的，至少有时是这样，因为它更容易调试和维护。我完全理解这样做是为了快速原型化一些东西。但你在“更容易调试和维护”一词上失去了我。当你需要在一个网站的多个页面上使用相同的点击、鼠标移动等处理程序时，我看不出这是怎么回事。在一个地方定义它（单独的JS文件），你就可以进行站点范围的更新了。我个人喜欢做
，然后在单独的JS文件中定义
doSomething
函数。当onclick处理程序在JS中被分配时，我感到非常恼火。我不只是查看源代码以查看函数在何处/如何被调用，我必须尝试用Javascript跟踪。然而，这就是我在回答中所说的，因为这似乎是当今的常态。包括最佳实践的+1。我不认为这更难理解。作为开发人员，您知道应用程序中发生了什么。当然，人们可能会忘记事件处理程序附加到哪个特定元素，但是
var el=document.querySelector（'.target'）；el.addEventListener（'click'，函数（e）{}，false）或
$（'.target'）。在（'click'，函数（e）{}）上（jQuery）非常容易理解和查找。与匿名函数相比，使用命名函数更容易调试。此外，您正在使用事件属性混乱全局名称空间。您的问题有#html和#css标记。你只搜索CSS解决方案吗？非常感谢，简单有效，完全满足了我的需要。不客气！我很高兴能帮上忙。可以肯定的是，您使用了我的答案，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;
}

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

<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>

#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;
}

<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>