下面的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/