Question

我在一个页面中有很多这样的元素。

<?php for($i=0;$i<100;$i++):?>
     <div class="parent">
        <span class="child"></span>
     </div>
<?php endif;?>

我想当用户将鼠标悬停在特定的div.psrent上时，我可以使用jQuery向div.child添加一个新类。（只有div.child，而不是另一个div.child）

在css中有类似的东西。

.parent:hover .child{...}

我想这样做，因为我想使用animate.css lib。

我想用悬停添加动画类。

Answer 1

我使用了JQuery doc here中的.hover（）函数。我没有动态生成列表项，但想法是一样的：

选择悬停的“父”元素
添加“蓝色”类时鼠标输入“父”元素
鼠标离开时将其移除它。

$('.parent').hover(
  function() {
    $(this).addClass('blue');
  },
  function() {
    $(this).removeClass('blue');
  }
);

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="parent">
    <span class="child">child1</span>
  </div>
  <div class="parent">
    <span class="child">child2</span>
  </div>
  <div class="parent">
    <span class="child">child2</span>
  </div>
</body>

Answer 2

尝试：

$( "div.psrent" ).hover(function() {
 $(this).find("span").addClass('childClass').removeClass('oldClass');//If you want to change span class inside div
 $(this).addClass('childClass').removeClass('oldClass');//If you want to change div class .if you dont want to remove old class just skip removeClass
});

别忘了把你的代码放在里面：

$( document ).ready(function() {

});

如何在animate.css lib中使用hover？

2 个答案: