Question

简而言之：点击图片可以通过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和类进行悬停转换的解决方案。单击缩小时，删除“悬停”类，从而删除边框。这带来了一个新问题：
如果您在点击时将鼠标悬停在图像上，并且一直悬停直到缩小结束，边框将消失，直到您再次鼠标移开并再次鼠标悬停时才会返回。我该如何解决这个问题？

Answer 1

使用变量切换状态：

<script>
var state;

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

</script>

<img onclick="switch()">

根据需要自定义代码。

Answer 2

@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');
  });

});

Answer 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>

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

3 个答案: