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

我有很多视频，想知道在播放视频时如何激活描述

我已经能够添加一个悬停状态，但当视频播放时它不能保持金色

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

使用说明
杯大小编程
.vid项目{
宽度：212px；
高度：119px；
浮动：左；
利润率：15px30px0px0；
填充：0px；
}
.拇指{
/*位置：相对位置*/
溢出：隐藏；
高度：100px；
}
.拇指img{
宽度：100%；
位置：相对位置；
顶部：-20px；
}
.vid item.desc{
颜色：#000000；
边缘顶部：5px；
高度：30px；
浮动：左；
文本对齐：左对齐；
}
.vid item.desc:悬停，.vid item.desc:活动{
颜色：#c79b4c；
边缘顶部：5px；
高度：30px；
浮动：左；
文本对齐：左对齐；
}
.vid项：悬停{
光标：指针；
}

以下是js小提琴：

---

非常感谢您提供的任何帮助

，因为您能够使用jQuery，我建议您将所有脚本置于HTML之外，并将其放入

标记或外部

.js

文件中

关于CSS，需要了解的几件事是，您可以使用父元素的

：hover

来设置子元素的样式

例如，我将向

.vid项目

元素添加一个名为

.active vid

的类，并向HTML添加一个

数据

属性

因此，您可以将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>

使用说明

---

您的

数据vidIndex

应设置为数组中元素的索引

您希望悬停时和视频播放时的状态都处于活动状态，还是仅在视频播放时处于活动状态？我希望悬停状态保持不变，但播放该视频时，我希望文本保持不变。您还用标签标记了此问题jQuery。。。您在这方面使用jQuery吗？如果您的站点不包含jQuery库，那么您将使用JavaScriptMy站点正在使用jQuery 1.11.1谢谢。现在唯一的问题是，当我点击第二个视频时，第一个仍然是金色的。我不太熟悉jquery抱歉。@Dunshea啊，是的，我这边有个小错误。在设置一个新类之前，我从未删除过gold类。看一下编辑。你现在应该没事了。