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

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

javascript jquery css

Javascript 移动元素时如何更改悬停状态？,javascript,jquery,css,Javascript,Jquery,Css,简言之：点击一个图像会通过css转换移动它。当图像从鼠标下方移开时，我希望图像的悬停效果消失我有一个没有边界的图像。当您单击它时，页面将使用zoomooz放大。当您将鼠标悬停在图像上时，页面放大时，边框将显示并停留在图像上。如果你点击任何地方，你就会缩小。但是，如果单击图像缩小，并且不移动鼠标，则图像将保持悬停状态，因此即使鼠标当前未在图像上方，图像也将保持边框我理解这是合乎逻辑的，因为没有触发更改的事件，但解决这个问题的方法是什么？我尝试将样式更改添加到单击事件中，但没有动画，因为它不是

简言之：点击一个图像会通过css转换移动它。当图像从鼠标下方移开时，我希望图像的悬停效果消失

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

我理解这是合乎逻辑的，因为没有触发更改的事件，但解决这个问题的方法是什么？我尝试将样式更改添加到单击事件中，但没有动画，因为它不是css中的过渡（

$（“img”）.css（“边框颜色”，“rgba（0,0,0,0）”）；）

）

这是我的HTML：

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

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

与这些问题密切相关：

这是一个非常清醒的过程答案，在那个例子中，我无法工作。我确实尝试过在单击图像时设置边框颜色，就像在该解决方案中一样。但是，更改的边界不算作过渡，因此不会设置动画
这有一个非常广泛的答案，但我真的不明白如何把它应用到我的情况

Edit:Junaid Ahmed提供了一个使用jQuery和类进行悬停转换的解决方案。当您单击以缩放移动时，将删除“hover”类，从而也删除边框。这带来了一个新问题：
如果您在单击时将鼠标悬停在图像上，并一直悬停到缩放结束，则边框将消失，直到您再次鼠标移出并再次鼠标移到上方时才会返回。

我该如何解决这个问题

使用变量切换状态：

<script>
var state;

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

</script>

<img onclick="switch()">


var状态；
功能开关（）{
如果（状态==1）{
/*删除边框的代码*/
状态=0；
}否则{
状态=1；
}
}

根据需要自定义代码。

使用变量切换状态：

<script>
var state;

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

</script>

<img onclick="switch()">


var状态；
功能开关（）{
如果（状态==1）{
/*删除边框的代码*/
状态=0；
}否则{
状态=1；
}
}

根据需要自定义代码。

@Jason说得对。您可以使用CSS删除悬停效果，并使用JS/JQuery实现悬停效果

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

});

@杰森是对的。您可以使用CSS删除悬停效果，并使用JS/JQuery实现悬停效果

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

});

我就这样换了，看看这个

$（文档）.ready（函数（）{
$（“img”）.hover（函数（evt）{
$（“img”）.addClass（“缩放边框”）；
event.stopPropagation（）
if（$（“img”）.hasClass（'zoomedimg'））{
$（“img”）.removeClass（'zoomedimg'）；
}否则{
$（“img”）.addClass（'zoomedimg'）；
$（“img”）.zoomTo（）；
}
});
$（窗口）。单击（函数（evt）{
$（“body”）.zoomTo（{}）；
$（“img”）.removeClass（'zoomedimg'）；
$（“img”）.removeClass（'zoom-border'）；
});
});
img{
宽度：100px；
边框颜色：rgba（0,0,0,0）；
左边距：10px；
过渡：边框颜色600ms；
}
.缩放边框{
边框：1px纯黑；
过渡：边框颜色0s；
}
.动物医学{
}
我像这样改变了，检查这个

$（文档）.ready（函数（）{
$（“img”）.hover（函数（evt）{
$（“img”）.addClass（“缩放边框”）；
event.stopPropagation（）
if（$（“img”）.hasClass（'zoomedimg'））{
$（“img”）.removeClass（'zoomedimg'）；
}否则{
$（“img”）.addClass（'zoomedimg'）；
$（“img”）.zoomTo（）；
}
});
$（窗口）。单击（函数（evt）{
$（“body”）.zoomTo（{}）；
$（“img”）.removeClass（'zoomedimg'）；
$（“img”）.removeClass（'zoom-border'）；
});
});
img{
宽度：100px；
边框颜色：rgba（0,0,0,0）；
左边距：10px；
过渡：边框颜色600ms；
}
.缩放边框{
边框：1px纯黑；
过渡：边框颜色0s；
}
.动物医学{
}

谢谢，这很有效！但我真的不明白为什么。mouseout和hover有什么区别？为什么会触发？mousout不是一个触发changed:hover状态的事件吗？另外，我刚刚意识到这一点，但这引入了一个新问题。如果在单击以缩小时将鼠标放在图片上，则即使在悬停时也会删除边框。它不会回来，直到你再次滑鼠和滑鼠。在我之前的评论中，我认为我误解了发生的事情。当你点击图像时，你只需删除悬停状态，但它与mouseout无关。我尝试了一些代码更改，但它与事件计时有关。在点击zoomout的时候，鼠标没有在图像上悬停，所以我无法完成这个任务。我不明白。也许它不会发生在这里，因为图片太小或移动太远。。。但当我在某个地方使用它时，它可能会发生。你是说你不能让它工作，因为它没有发生在这张照片上？您知道一种解决方案吗？您可以不直接使用removeClass（'hover'）
，而是检查鼠标是否在图像上，即if（$（'img:hover'）。length==0{$（'img'）。removeClass（'hover'）；}
谢谢，这很有效！但我真的不明白为什么。mouseout和hover有什么区别？为什么会触发？mousout不是一个触发changed:hover状态的事件吗？另外，我刚刚意识到这一点，但这引入了一个新问题。如果在单击以缩小时将鼠标放在图片上，则即使在悬停时也会删除边框。它不会回来，直到你再次滑鼠和滑鼠。在我之前的评论中，我认为我误解了发生的事情。当你点击图像时，你只需移除悬停状态，但它与鼠标无关