移动元素时如何更改悬停状态？答案

【问题标题】：How to change hover state when element is moved?移动元素时如何更改悬停状态？
【发布时间】：2017-11-26 07:51:40
【问题描述】：

简而言之：单击图像会通过 CSS 过渡来移动它。我希望图像从鼠标下方移开时的悬停效果消失。

我有一张没有边框的图片。当您单击它时，页面会使用 zoomooz 放大。当您将鼠标悬停在图像上时，边框会显示并在页面放大时停留在那里。如果您单击任何地方，您就会缩小。但是，如果您单击图像以缩小并且不移动鼠标，则图像将保持悬停状态，因此即使鼠标当前不在图像上方，图像也会保留边框。

我知道这是合乎逻辑的，因为没有触发更改的事件，但是有什么方法可以解决这个问题？我尝试仅在 click 事件中添加样式更改，但没有动画，因为它不是 css 中的过渡 ($("img").css("border-color","rgba(0,0,0,0)");))

Here is a JSFiddle

这是我的 HTML：

<body>
    <img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>

CSS

  img {
    width: 100px;
    border: 1px solid black;
    border-color: rgba(0, 0, 0, 0);
    margin-left: 10px;
    transition: border-color 600ms;
  }
  img:hover {
    border: 1px solid black;
    transition:border-color 0s;
  }

  .zoomedimg {
    border-color: rgba(0, 0, 0, 1);
  }

Javascript：

$(document).ready(function() {
  $("img").click(function(evt) {
    event.stopPropagation()

    if ($("img").hasClass('zoomedimg')) {
      $("img").removeClass('zoomedimg');
      $("body").zoomTo();

    } else {
      $("img").addClass('zoomedimg');
      $("img").zoomTo();
    }
  });
  $(window).click(function(evt) {
    $("body").zoomTo({});
    $("img").removeClass('zoomedimg');
  });
});

与这些问题密切相关：

How to remove hover state when the element moves这个很清醒答案，在那个例子中我无法开始工作。当我单击该解决方案中的图像时，我确实尝试设置边框颜色。但是变化的边框不算作过渡，所以它不会动画。
Hover state is maintained during a transition even if the element has gone 这有一个非常广泛的答案，但我并不真正了解如何将其应用于我的情况。

编辑： Junaid Ahmed 提供了一种使用 jQuery 和类进行悬停转换的解决方案。当您单击缩小时，您删除了“悬停”类，因此也删除了边框。这带来了一个新问题：
如果您在单击时将鼠标悬停在图像上，并且一直悬停直到缩小结束，则边框会消失并且不会返回，直到您再次将鼠标悬停和鼠标悬停。
我将如何解决这个问题？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

@Jason 是对的。您可以使用 CSS 删除悬停效果并使用 JS/JQuery 完成悬停效果。 Check my forked JSFiddle

CSS：

img {
  width: 100px;
  border: 1px solid black;
  border-color: rgba(0, 0, 0, 0);
  margin-left: 10px;
  transition: border-color 600ms;
}
img.hover {
  border: 1px solid black;
  transition:border-color 0s;
}

.zoomedimg {
  border-color: rgba(0, 0, 0, 1);
}

JS：

$(document).ready(function() {

    $("img").on('mouseover', function(){
    $("img").addClass('hover');
  });

    $("img").on('mouseout', function(){
    $("img").removeClass('hover');
  });

  $("img").click(function(evt) {
    event.stopPropagation()

    if ($("img").hasClass('zoomedimg')) {
      $("img").removeClass('zoomedimg').removeClass('hover');
      $("body").zoomTo();

    } else {
      $("img").addClass('zoomedimg');
      $("img").zoomTo();
    }
  });
  $(window).click(function(evt) {
    $("body").zoomTo({});
    $("img").removeClass('zoomedimg').removeClass('hover');
  });

});

【讨论】：

谢谢，这行得通！但我真的不明白为什么。 mouseout 与 :hover 有何不同？为什么会触发？ mousout 不是会触发更改的 :hover 状态的事件吗？
另外，我刚刚意识到这一点，但这引入了一个新问题。如果您在单击缩小时确实将鼠标悬停在图片上，即使您在悬停，也会删除边框。它不会返回，直到您再次鼠标悬停和鼠标悬停。同样在我之前的评论中，我认为我误解了发生的事情。当您单击图像时，您只是删除了悬停状态，但它与 mouseout 无关。
我尝试了一些代码更改，但它与事件时间有关。在点击缩小时，鼠标没有悬停在图像上，所以我无法做到这一点。
我不明白。也许它不会在这里发生，因为图片太小或移动太远......但是当我在某处使用它时可能会发生。你是说你不能让它工作，因为它没有在这张照片中发生吗？你知道一个解决方案，这样就不会发生这种情况吗？
不直接使用removeClass('hover')，您可以检查鼠标是否在图像上，即if ( $('img:hover').length == 0 ) { $('img').removeClass('hover'); }

【解决方案2】：

使用变量来切换状态：

<script>
var state;

function switch() {
if (state == 1){
/* your code to remove the border */
state = 0;
}else{
state = 1;
}
}

</script>

<img onclick="switch()">

根据需要自定义代码。

【讨论】：

【解决方案3】：

我改成这样了，检查一下。

$(document).ready(function() {
  $("img").hover(function(evt) {
  $("img").addClass('zoom-border');
    event.stopPropagation()

    if ($("img").hasClass('zoomedimg')) {
      $("img").removeClass('zoomedimg');
     

    } else {
      $("img").addClass('zoomedimg');
      $("img").zoomTo();
    }
  });
  $(window).click(function(evt) {
    $("body").zoomTo({});
    $("img").removeClass('zoomedimg');
    $("img").removeClass('zoom-border');
  });

});

  img {
    width: 100px;
    
    border-color: rgba(0, 0, 0, 0);
    margin-left: 10px;
    transition: border-color 600ms;
  }
  
  .zoom-border{
    border: 1px solid black;
    transition:border-color 0s;
  }
  .zoomedimg {
    
    
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://dropfruitduo.github.io/jquery.zoomooz.min.js"></script>
<body>
    <img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>

【讨论】：