How to change hover state when element is moved?
Question
In short: clicking on an image moves it with a css transition. I want the hover effect of the image to go away when it moves away from under the mouse.
I have an image without a border. When you click on it the page zooms in using zoomooz. When you hover over the image a border shows and stays there while the page is zoomed in. If you click anywhere you zoom back out. However if you click on the image to zoom out and don't move the mouse, the image stays in the hover state so the image will keep the border even when the mouse is not currently over the image.
I understand that this is logical because there is no event that triggers the change, but what would be a way to solve this? I tried adding a style change just to the click event but then there is no animation because it's not a transition in css ( $("img").css("border-color","rgba(0,0,0,0)");) )
This is my 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');
});
});
Very closely related to these questions:
How to remove hover state when the element moves This had a very sober answer, which in that example I could not get to work. I did try setting the border color when I clicked the image like in that solution. But then the changing border doesn't count as a transition so it will not animate.
Hover state is maintained during a transition even if the element has gone This had a very extensive answer, but I didn't really understand how to apply it to my situation.
Edit: Junaid Ahmed offered a solution to make the hover transition using jQuery and a class. When you click to zoomout you remove the "hover" class and thus also the border. This poses a new problem:
if you hover over the image while clicking and you keep hovering until the zoomout ends the border disappears and doesn't return until you mouseout and mouseover again.
How would I solve this?
3 answers
solution1
0 2017-06-22 21:27:21
use a variable to switch over the states:
<script>
var state;
function switch() {
if (state == 1){
/* your code to remove the border */
state = 0;
}else{
state = 1;
}
}
</script>
<img onclick="switch()">
customize the code as you need.
solution2
0 ACCPTED 2017-06-22 22:03:11
@Jason is right. You could drop the hover effect using CSS and accomplish the hover effect with JS/JQuery. Check my forked JSFiddle
The 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);
}
The 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');
});
});
solution3
0 2017-06-23 05:43:28
I changed like this, Check this.
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.