Question

我有这段代码：

  <div class="footer-menu">
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>World
     </span>
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Internet
     </span>
     <span>
         <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Travel
     </span>
     <span>
        <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Technology
     </span>
     <span>
     <i class="fa fa-angle-right fa-md" aria-hidden="true"></i>Fashion
     </span>
 </div>

当我将鼠标悬停在 i 标记时，我想要实现的是添加 float-right 类使用jQuery的跨度。问题是，当我将鼠标悬停在一个跨度上时，该类会添加到每个 i 标记中。

 $( ".footer-menu span" ).hover(function() {
  $('i').addClass("float-right");
});

Answer 1

试试这个

name1=value1&name2=value2

如果需要悬停删除类

$( ".footer-menu span" ).hover(function() {
  $(this).children("i").addClass("float-right");
});

Answer 2

试试这个

$( ".footer-menu span" ).hover(function() {
  $(this).find("i").addClass("float-right");
});

Answer 3

您不需要Javascript来处理悬停时的样式更新。使用CSS更容易做到这一点：

.footer-menu span i {
  float: left;
}
.footer-menu span:hover i {
  float: right;
}

Jquery在悬停时浮动

3 个答案: