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

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

<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的干净方法？

最佳答案

您可以使用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/

关于javascript - 只有在鼠标单击并从元素上移出鼠标后，才初始化悬停状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27337441/