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与父元素一起使用来设置子元素的样式。

对于我的示例，我将向您的.active-vid元素添加一个名为.vid-item的类，并为您的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应设置为数组中元素的索引

如何激活onclick上的视频说明？

1 个答案:

如何激活oncl​​ick上的视频说明？

1 个答案:

如何激活onclick上的视频说明？