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

简而言之：点击一个图像将其移动一个CSS过渡。我希望图像的悬停效果在离开鼠标时消失。元素移动时如何改变悬停状态？

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

我明白这是合乎逻辑的，因为没有事件会触发变化，但是解决这个问题的方法是什么？我尝试添加一个风格的改变只是为了点击事件，但随后没有动画，因为它不是在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 这有一个非常广泛的答案，但我真的不明白如何将它应用于我的情况。

编辑：朱奈德·艾哈迈德提供了一个解决方案，使使用jQuery和类悬停过渡。当你点击放大时，你可以删除“悬停”类，也就是边界。这提出了一个新问题：
如果您在单击时将鼠标悬停在图像上，并且您保持悬停状态，直到缩放结束，边框消失并且不会返回，直到您再次进行鼠标移出和鼠标悬停为止。
我该如何解决这个问题？

来源

2017-06-22 dropfruitduo

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

});

来源

2017-06-22 22:03:11 Junaid

感谢，这个作品！但我不明白为什么。 mouseout与mouseover有何不同：悬停？为什么会触发？是不是会触发一个事件触发改变：悬停状态？ – dropfruitduo

另外，我刚刚意识到这一点，但是这引入了一个新问题。如果在点击缩小图片时确实将鼠标放在图片上，即使您在悬停，也要移除边框。它不会返回，直到你再次mouseout和mouseover。在我之前的评论中，我想我误解了发生的事情。当您单击图像时，您只需删除悬停状态，但与鼠标悬停无关。 – dropfruitduo

我尝试了一些代码更改，但它与事件时间有关。在点击缩小时，鼠标不在图像上方悬停，因此我无法完成此操作。 – Junaid

使用一个变量来在状态切换：

<script> 
var state; 

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

</script> 

<img onclick="switch()">

定制代码，因为你需要。

来源

2017-06-22 21:27:21

我改变这样的，请确认。

$(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>

来源

2017-06-23 05:43:28

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

回答

相关问题