如何使视频描述在点击时处于活动状态？

Question

我有一堆视频，想知道如何在视频播放时激活描述？

我已经能够添加悬停状态，但在播放该视频时它不会保持金色。

           <iframe id="vid_frame4" class="active" src="https://www.youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&rel=0" frameborder="0" width="454" height="255" allowscriptaccess="always" allowfullscreen></iframe>


            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
              <div class="desc active" onClick=".addClass(active)">Directions for Use</div>
            </div>

            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/dPxKQ7uh6xg?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/dPxKQ7uh6xg/2.jpg"></div>
              <div class="desc">Cup Size Programming</div>
            </div>

   .vid-item {
        width: 212px;
        height: 119px;
        float: left;
        margin: 15px 30px 0px 0;
        padding: 0px;
    }

    .thumb {
        /*position: relative;*/
        overflow:hidden;
        height: 100px;
    }

    .thumb img {
        width: 100%;
        position: relative;
        top: -20px;
    }

    .vid-item .desc {
        color: #000000;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item .desc:hover, .vid-item .desc:active {
        color: #c79b4c;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item:hover {
        cursor: pointer;
    }

这是 js 小提琴：https://jsfiddle.net/designstreet1/awbyf1h5/

任何帮助将不胜感激

Answer 1

由于您能够使用 jQuery，我建议您将所有脚本放在 HTML 之外，并将其放入 <script> 标记或外部 .js 文件中。

关于您的 CSS，需要注意的一点是，您可以将 :hover 与父元素一起使用来设置子元素的样式。

对于我的示例，我将向您的 .vid-item 元素添加一个名为 .active-vid 的类，并向您的 HTML 添加一个 data 属性

因此，您可以将 CSS 设置为：

.vid-item:hover .desc, .vid-item.active-vid .desc {
    color: gold;
}

对于您的 HTML，去掉 onclick 属性并使用 jQuery 事件处理程序。我会像这样设置我的脚本：

var vidArray = ["http://youtube.com/Video1", "http://youtube.com/Video2"]

$(document).on('click', '.vid-item', function(){

    $('.active-vid').removeClass('active-vid'); //Removes the current gold class

    var index = $(this).data('vidIndex');
    $('#vid_frame4').attr('src', vidArray[index]);

    $(this).addClass('active-vid'); //Sets new gold class
});

您的 HTML 应该如下所示：

<div class="vid-item" data-vidIndex="0">
      <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
      <div class="desc">Directions for Use</div>
</div>

您的data-vidIndex 应设置为数组中元素的索引