下面的php代码生成三个列表项。我想在mouseover/mouseout上添加/删除a css class active。下面显示的js成功地将类切换为活动，但当我鼠标悬停在一个项目上时，它会同时切换。我想在悬停时为单个列表项设置动画。由于它是一个循环，我不太了解如何在mouseover上为单个列表项设置动画。另一个要求是，除了在页面加载时手动悬停5秒之外，我还想自动设置列表项的动画。我对js不是很熟悉，所以如果你能给我提供任何见解，我将不胜感激。
<ul class="daily-featured__videos">
<?php for ($i = 0; $i < 3; $i++) : ?>
<li class="the-daily-featured__video daily-featured__video active">
<div class="daily-featured__video-image">
<a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>" >
<img title="<?php echo addslashes($this->videos[$i]->title); ?>" src="<?php echo $this->videos[$i]->getPoster('small'); ?>" style="width: 258px;">
<div class="thumbnail-action-button icon-play the-thumnbail-action-button" data-label="<?php echo $this->videos[$i]->duration; ?>" ></div>
</a>
</div>
<div class="daily-featured__video-text">
<div class="daily-featured__video-channel"><?php echo $this->videos[$i]->credit; ?></div>
<h2 class="daily-featured__video-title">
<a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>">
<?php echo $this->videos[$i]->title; ?>
</a>
</h2>
<?php daily_featured_socials(); ?>
</div>
</li>
<?php endfor; ?>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".the-daily-featured__video").hover(function() {
$(".the-daily-featured__video").toggleClass("active");
});
});
</script>
您可以这样做：
<script type="text/javascript">
$(document).ready(function() {
$(".the-daily-featured__video")
.mouseenter( function(){ $(this).addClass("active") })
.mouseleave( function(){ $(this).removeClass("active") });
});
</script>
这里是jsbin的简化版本：https://jsbin.com/zowidaruke/