1

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)");))

Here is a JSFiddle

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:

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?

dropfruitduo
  • 113
  • 4

3 Answers3

0

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.

Jason Grey Tavarez
  • 1
0

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

});
Junaid
  • 1,270
  • 3
  • 14
  • 33
  • thanks, this works! But I don't really understand why. How does mouseout differ from :hover? Why does that trigger? Isn't mousout an event that would trigger the changed :hover state? – dropfruitduo Jun 23 '17 at 08:19
  • Also, I just realized this, but this introduces a new problem. If you do keep the mouse over the picture when clicking to zoom out you remove the border even though you're hovering. It won't return until you mouseout and mouseover again. Also in my previous comment I think I misunderstood what happened. When you click the image you just remove the hover state but it has nothing to do with mouseout. – dropfruitduo Jun 23 '17 at 13:56
  • I tried some code changes but it has something to do with the event timing. At the time of the click to zoomout, the mouse is not hovering over the image and so I couldn't get to accomplish that. – Junaid Jun 23 '17 at 17:47
  • I don't understand. Maybe it doesn't happen here because the picture is too small or it moves too far... but it might happen when I use this somewhere. Are you saying you couldn't make it work because it's not happening in this picture? Do you know of a solution so this might not happen? – dropfruitduo Jun 23 '17 at 18:30
  • Instead of using `removeClass('hover')` directly, you can check if mouse is over the image i.e. `if ( $('img:hover').length == 0 ) { $('img').removeClass('hover'); }` – Junaid Jun 23 '17 at 18:52
  • But then the original problem reappears! Also it doesn't solve the situation when you click outside the image but because of the zoom the mouse enters the image again. – dropfruitduo Jun 23 '17 at 19:41
0

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>
Abijith Ajayan
  • 238
  • 3
  • 17