CSS样式未达预期：图片元素正常视频元素不显示悬停文本

给两个不同面板的元素应用了相同CSS样式（对应grid.css文件），图片元素可正常显示悬停文本，但视频元素无法显示。尝试过调整CSS设置、通过检查元素排查问题，未找到原因。

HTML代码 #

<a href="TO SET">
<div class="applead grid-item" onmouseover="regifApple()" onmouseleave="revertApple()">
<img class="img" id="appleimage" width="100%" height="auto" src="./static/assets/applead.webp" alt="Applead Image">
  <div class="img-caption">
    <div class="vid-title">
      Mock Apple Ad
    </div>
    <div class="vid-director">
      Animation and Motion Graphics
    </div>
  </div>
</img>
</div>
</a>
<a href="TO SET">
  <div class="OYYGC grid-item" onmouseover="regifOYYGC()">
  <video class="img" id="OYYGCimage" width="100%" height="auto" src="./static/assets/OYYGC.mp4" loop muted="muted" alt="OYYGC">
    <div class="img-caption">
      <div class="vid-title">
        Oh Yeah You Gonna Cry?
      </div>
      <div class="vid-director">
        Animated x Live Music Video
      </div>
    </div>
  </video>
  </div>
  </a>

CSS代码 #

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
  }

.grid-item{
    height: 17w;
    margin: 1vw;
}

.vid-title{
    width:100%;
    position:absolute;
    text-align:center;
    top:50%;
    font-weight:400;
    font-size:1vw;
    letter-spacing:0.2vw;
    color:white;
    -webkit-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0);
    padding:0px 15px;
    box-sizing:border-box;
}

.vid-director{
    color:white;
    opacity:0.5;
    font-size:0.5vw;
    letter-spacing:0.1vw;
    font-weight:100;
    width:100%;
    position:absolute;
    text-align:center;
    bottom:5px;
}

.img {
    transition: filter 0.3s ease;
    filter: brightness(100%);
  }

.applead {
    position: relative;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}
  
.applead img {
    display: block;
    width: 100%;
    height: auto;
}

.applead .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.applead:hover .img-caption {
    opacity: 1;
  }

.applead:hover .img {
    filter: brightness(50%);
  }

.OYYGC {
    position: relative;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}
  
.OYYGC img {
    display: block;
    width: 100%;
    height: auto;
}

.OYYGC .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

.OYYGC:hover .img-caption {
    opacity: 1;
  }

.OYYGC:hover .img {
    filter: brightness(50%);
  }

JavaScript代码 #

var mouseOverApple = false;
var mouseWasGoneApple = true;

$(document).ready(function(){
    $(document).mousemove(function(){
         if($("#appleimage:hover").length != 0){
            mouseOverApple = true;
        } else{
            mouseOverApple = false;
        }
        if($("#OYYGCimage:hover").length != 0){
            mouseOverOYYGC = true;
        } else{
            mouseOverOYYGC = false;
            revertOYYGC();
        }
    });
});

function regifApple(){
    if (mouseWasGoneApple == true){
    let content = document.getElementById("appleimage");
    content.src = "./static/assets/applead.gif";
    mouseWasGoneApple = false;
    }
}

function revertApple(){
    if (mouseOverApple == false){
        let content = document.getElementById("appleimage");
        content.src = "./static/assets/applead.webp";
        mouseWasGoneApple = true;
    }
}

var mouseOverOYYGC = false;
var mouseWasGoneOYYGC = true;
var toActivateOYYGC = false;

function regifOYYGC(){
    if (mouseWasGoneOYYGC == true){
    let content = document.getElementById("OYYGCimage");
    content.play();
    mouseWasGoneOYYGC = false;
    }
}

function revertOYYGC(){
    let content = document.getElementById("OYYGCimage");
    content.pause();
    content.currentTime = 0;
    mouseWasGoneOYYGC = true;
}

1. HTML结构错误：video标签内部仅支持<source>、<track>等特定子元素，你把.img-caption放在video标签内，浏览器会直接忽略这个无效子元素，导致悬停文本根本没有被渲染到DOM中。而图片元素的.img-caption实际是在img标签外（img是自闭合元素，浏览器会自动修正结构），所以能正常显示。
2. 事件绑定缺失：视频所在的.OYYGC容器没有绑定onmouseleave事件，导致鼠标离开时无法触发revertOYYGC()，同时可能影响悬停状态的判断。

1. 修正HTML结构 #

将视频元素的.img-caption移到video标签外，和图片元素结构保持一致，同时补充onmouseleave事件：

<a href="TO SET">
  <div class="OYYGC grid-item" onmouseover="regifOYYGC()" onmouseleave="revertOYYGC()">
    <video class="img" id="OYYGCimage" width="100%" height="auto" src="./static/assets/OYYGC.mp4" loop muted alt="OYYGC"></video>
    <div class="img-caption">
      <div class="vid-title">
        Oh Yeah You Gonna Cry?
      </div>
      <div class="vid-director">
        Animated x Live Music Video
      </div>
    </div>
  </div>
</a>

2. 精简CSS冗余代码（可选） #

.applead和.OYYGC的样式完全重复，可以合并成通用选择器，减少代码冗余：

/* 合并两个容器的通用样式 */
.grid-item.applead, .grid-item.OYYGC {
    position: relative;
    overflow: hidden;
    font-family: Roboto, sans-serif;
}

.grid-item.applead .img, .grid-item.OYYGC .img {
    display: block;
    width: 100%;
    height: auto;
}

.grid-item.applead .img-caption, .grid-item.OYYGC .img-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-item.applead:hover .img-caption, .grid-item.OYYGC:hover .img-caption {
    opacity: 1;
}

.grid-item.applead:hover .img, .grid-item.OYYGC:hover .img {
    filter: brightness(50%);
}

3. 优化JavaScript性能 #

替换全局mousemove监听为元素的hover事件绑定，更高效：

$(document).ready(function(){
    // 图片元素悬停监听
    $("#appleimage").hover(
        function() { mouseOverApple = true; },
        function() { mouseOverApple = false; }
    );

    // 视频元素悬停监听
    $("#OYYGCimage").hover(
        function() { mouseOverOYYGC = true; },
        function() { 
            mouseOverOYYGC = false;
            revertOYYGC();
        }
    );
});

内容的提问来源于stack exchange，提问作者DefaultNano