Question

我有一个简单的链接，可以在每次点击时切换。当处于“点击”状态时，还会有一个悬停状态被添加到链接中。见下面的例子：

<style>
  .added {
    &:hover {
      background-color: red;
    }
  }
</style>

<script>
  $('a').on('click', function() {

    var $link = $(this);

    if ( $link.hasClass('added') ) {

      $link
        .removeClass('added')
        .html('Add Me!')

    } else {

      $link
        .addClass('added')
        .html('Added');

  });
</script>

<a href='#'>Add Me!</a>

这里的挑战是，在点击“添加我”后，我希望按钮不立即变为红色。（因为鼠标在技术上仍然悬停在链接上）。一旦我点击，移开然后返回，它应该只变成红色。

使用CSS和/或jQuery是否有一种干净的方法？

Answer 1

您可以使用jQuery的mouseout()函数实现此目的。

在这里，我修改了您现有的代码（包含一些小修补程序），以包含对mouseout的检查以添加.ready类：

  $('a').click(function() {
    var link = $(this);
    if ( link.hasClass('added') ) {
      link.removeClass('added').removeClass('ready').html('Add Me!');
    } else {
      link.addClass('added').html('Added');
      // Check if .ready is applied already
      if(!link.hasClass('ready')){
        link.mouseout(function(){
          link.addClass('ready');
        });
      }
    }
  });

并修改了您的SASS以包含.ready：

  .added.ready{
    &:hover {
      background-color: red;
    }
  }

你可以在这个小提琴上看到它：http://jsfiddle.net/easL77fa/

只有在鼠标单击并从元素中移出后，才会初始化悬停状态

1 个答案: