html - 在视频元素上使用悬停

Question

我最近在我的页面前面添加了一个视频。将鼠标悬停在 5 个图像上时会显示一个按钮，但视频似乎不起作用。

这是您可以观看的网站:www.barsnes.tk

这是我的 Html 代码:

  <section class="portfolio_home" id="portfolio">
        <figure class="port-item">
            <!-- Portfolio 1 -->
        <img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
                <a href="Geo.html" class="button_accent">Geofilters</a>
            </figcaption>
        </figure>

        <figure class="port-item">
            <!-- Portfolio 5 -->
        <video src="Torsken-Intro.mp4" alt="portfolio item" autoplay loop/> 
            <figcaption class="port-desc">
                <a href="Video.html" class="button_accent">Videos</a>
            </figcaption>
        </figure>
    </section>

这是我的 CSS 代码:

/* portfolio
*/

.portfolio_home {
    margin: 1.8em 0 0;
    background-size: cover;
}

.portfolio_home img {
    padding: 0;
}

.portfolio_home video {
    padding: 0;
    max-width: 100%;
    height: auto;
}

.port-item video {
    display: block;
}

.port-item {
    margin: 0;
    position: relative;
}

.port-desc {
    position: absolute;
    z-index: 100;
    bottom: 0em;
    left: 0em;
    right: 0em;
    color: #FFF;
    background: rgba(0,0,0,.75);
    padding-bottom: 1em;
    padding-top: 1em;
}

.port-desc p {
    margin: .5em;
    background-size: 100% 100%;
}

@media (min-width: 60rem) {
    .port-item {
        width: 33.3333334%;
        float: left;
        overflow: hidden
    }

    .port-desc {
        transform: translateY(150%);
    }

    .port-item:hover .port-desc {
        transform: translateY(0%)
    }

    .port-item img {
    max-width: 100%;
    height: auto;
    padding: 0 0 0;
    background-size: cover;
    }

    .port-item video {
    max-width: 100%;
    height: auto;
    padding: 0 0 0;
    background-size: cover;
    }

}

.button_accent {
    display: inline-block;
    font-size: .8rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
    border-color: #FFF;
    padding: .5em 1em;
    color: #FFF;
}

.button_accent:hover,
.button_accent:focus {
    background: #FFF;
    color: #000;
}

相当多的代码已被删除，但如果您想整体查看，请看这里，https://github.com/Barsnes/Barsnes

感谢任何帮助，另外，请记住对我做错的地方添加 amn 解释!

提前致谢!

Answer 1

这个问题有一个非常简单的解决方案:关闭您的视频标签 :P

视频标签不像图片标签，它们需要关闭。 Here's a JSFiddle您网站的固定标签。

代码片段:

<video src="Torsken-Intro.mp4" alt="portfolio item" autoplay loop></video> 
        <figcaption class="port-desc">
            <a href="Video.html" class="button_accent">Videos</a>
        </figcaption>

希望这对您有所帮助!