How exactly do I use mouseenter and mouseleave?

Question

I have an svg line that activates on the hover of a parent div in css but I cant get the animation to reverse on leaving the div so i'm trying to use jquery with mouseenter/mouseleave. This is what I have right now:

html:

<div class="container" onclick="second_pic">
<button class="next-btn">&nbsp;</button>
<svg class="svg-next-top" version="1.1" id="Layer_1" x="0px" y="0px" width="40px" height="80px" viewBox="0 0 40 80" enable-background="new 0 0 40 80" xml:space="preserve">
    <line class="line-next-top" fill="none" opacity="0" stroke="white" stroke-width="5" x1="33.514" y1="51.514" x2="4.799" y2="0.095"/>
</svg>
<svg class="svg-next-bottom" version="1.1" id="Layer_1" x="0px" y="0px" width="40px" height="80px" viewBox="0 0 40 80" enable-background="new 0 0 40 80" xml:space="preserve">
    <line class="line-next-bottom" fill="none" opacity="0" stroke="white" stroke-width="5" x1="33.775" y1="-0.104" x2="4.714" y2="52.147"/>
</svg>
</div>

css:

body {
  background-color: red;
}

/* BTN POSITIONING: */
.next-btn, .prev-btn {
    display: block;
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 100;
    opacity: 1;
}

.next-btn {
    position: absolute;
    background: url(../images/next.png) no-repeat 80% 50%;
    background-size: 20px;
    right: 0;
    cursor: pointer;
    border-style: none;
    border: 2px solid yellow;
}

/* POSITIONING: */
.svg-next-top {
    position: absolute;
    top: 49.58%;
    right: 19.85px;
    width: 14px;
    height: 40px;
    margin: -20px 0 0 0;
}

.svg-next-bottom {
    position: absolute;
    top: 51.50%;
    right: 19.9px;
    width: 14px;
    height: 40px;
    margin: -20px 0 0 0;
}


/* HOVERS: */
.container:hover .line-next-top {
    opacity: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: in 5s linear alternate 1;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes in {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.container:hover .line-next-bottom {
    opacity: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: in 5s linear alternate 1;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes in {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

jsbin:

http://jsbin.com/womupedati/4/edit

Any help is greatly appreciated, i'm new to javascript/jquery.

Answer 1

I can provide this solution for your problem:

1. I've rebuilded animation: now we have two types of movement: in and out
2. .line class is added to lines to shorten repeating code
3. On normal state SVG lines have out animation, and on :hover they move in
4. I've removed opacity: 0 from lines, because in your example when the mouse is out, lines just become invisible

It's not perfect solution, but it's the way to experiment more.

 body { background-color: red; } /* BTN POSITIONING: */ .next-btn, .prev-btn { display: block; position: absolute; top: 0; width: 100px; height: 100%; z-index: 100; opacity: 1; } .next-btn { position: absolute; background: url(../images/next.png) no-repeat 80% 50%; background-size: 20px; right: 0; cursor: pointer; border-style: none; border: 2px solid yellow; } /* POSITIONING: */ .svg-next-top { position: absolute; top: 49.58%; right: 19.85px; width: 14px; height: 40px; margin: -20px 0 0 0; } .svg-next-bottom { position: absolute; top: 51.50%; right: 19.9px; width: 14px; height: 40px; margin: -20px 0 0 0; } /* HOVERS: */ .container .line { opacity: 1; stroke-dasharray: 100%; stroke-dashoffset: 0; -webkit-animation: in 300ms linear alternate 1; -webkit-animation-fill-mode: forwards; } .container:hover .line { opacity: 1; stroke-dasharray: 100%; stroke-dashoffset: 0; -webkit-animation: out 300ms linear alternate 1; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes in { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100%; } } @-webkit-keyframes out { from { stroke-dashoffset: 100%; } to { stroke-dashoffset: 0; } } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="container" onclick="second_pic"> <button class="next-btn">&nbsp;</button> <svg class="svg-next-top" version="1.1" id="Layer_1" x="0px" y="0px" width="40px" height="80px" viewBox="0 0 40 80" enable-background="new 0 0 40 80" xml:space="preserve"> <line class="line line-next-top" fill="none" opacity="0" stroke="white" stroke-width="5" x1="33.514" y1="51.514" x2="4.799" y2="0.095"/> </svg> <svg class="svg-next-bottom" version="1.1" id="Layer_1" x="0px" y="0px" width="40px" height="80px" viewBox="0 0 40 80" enable-background="new 0 0 40 80" xml:space="preserve"> <line class="line line-next-bottom" fill="none" opacity="0" stroke="white" stroke-width="5" x1="33.775" y1="-0.104" x2="4.714" y2="52.147"/> </svg> </div> </body> </html> 

PS On different resolutions your lines cross differently (see images below).

EDIT: It's not the answer to your question about mouseenter and mouseleave, but in this case you can solve the problem without use of scripts.

Anyway, if you want, you can look at hover method ( http://api.jquery.com/hover/ ). You can provide two classes .in and .out for SVG lines with in and out animation, and add them on hover like that:

$(button).hover(
  function () {
    svg.removeClass('out').addClass('in');
  },
  function () {
    svg.removeClass('in').addClass('out');
  }
);

Where button and svg are jQuery objects for corresponding elements.