0

我有一个页面，其中有视频缩略图（图像），当点击它们时，视频会在更大的 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>
4

1 回答 1

0

如果页面没有刷新，您可以在点击的 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 路径。

于 2013-05-20T10:02:40.807 回答