html - 选择缩略图样式时

Question

我有一个页面，其中有视频缩略图(图像)，当点击它们时，视频会在更大的 div 中播放。我让它们在鼠标悬停时设置样式等等，但是当播放视频时，我希望对当前缩略图进行样式设置，以便他们知道正在播放哪个缩略图。

我曾尝试将事件类添加到缩略图 div，但该类的样式适用于所有类。谁能想出如何实现这一目标或我哪里出错了？

html代码

<div class="main">
<iframe width="800" height="500" src="video-1.mp4" frameborder="0" allowfullscreen></iframe>
</div>

<ul>
<li class="thumbnail"><a href="video-1.mp4" class="video-1" title=""><img src="images/videoPlayer-thumbnail-1.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-2.mp4" class="video-2" title=""><img src="images/videoPlayer-thumbnail-2.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-3.mp4" class="video-3" title=""><img src="images/videoPlayer-thumbnail-3.jpg" alt=""/></a></li>
</ul>

Answer 1

如果页面不刷新，你可以在点击的IMG中添加一个CLASS，然后你可以改变你想要的风格

编辑:

<li class="thumbnail">
  <a href="video-3.mp4?class=link1" class="video-3" title="">
     <img src="images/videoPlayer-thumbnail-3.jpg" alt=""/>
  </a>
</li>

并使用jQuery 拆分URL 并找到参数，然后匹配css 路径。