仅在鼠标单击并移出元素后才初始化悬停状态

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/