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

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;
    }
  }

您可以在这个 fiddle 上看到它的实际效果:http://jsfiddle.net/easL77fa/