Javascript 我该如何使用mouseenter和mouseleave？

我有一个svg行，在css中父div悬停时激活，但我无法在离开div时使动画反转，因此我尝试将jquery与mouseenter/mouseleave一起使用。这就是我现在拥有的：

html:

jsbin：

---

非常感谢您的帮助，我是javascript/jquery新手。

我可以为您的问题提供以下解决方案：

我重建了动画：现在我们有两种类型的运动：入和出 .line类添加到行以缩短重复代码 在正常状态下，SVG行具有输出动画，在：悬停时，它们移入 我已经删除了线的不透明度：0，因为在您的示例中，当鼠标离开时，线就变得不可见 这不是一个完美的解决方案，但这是进行更多实验的方法

身体{ 背景色：红色； } /*BTN定位：*/ .next btn、.prev btn{ 显示：块； 位置：绝对位置； 排名：0； 宽度：100px； 身高：100%； z指数：100； 不透明度：1； } .下一个btn{ 位置：绝对位置； 背景：url../images/next.png不重复80%50%； 背景尺寸：20px； 右：0； 光标：指针； 边框样式：无； 边框：2倍纯黄色； } /*定位：*/ .svg下一个顶部{ 位置：绝对位置； 最高：49.58%； 右：19.85px； 宽度：14px； 高度：40px； 裕度：-20px 0； } .svg下一个底部{ 位置：绝对位置； 最高：51.50%； 右：19.9px； 宽度：14px； 高度：40px； 裕度：-20px 0； } /*悬停：*/ .集装箱线{ 不透明度：1； 行程：100%； 笔划偏移：0； -webkit动画：以300ms线性替换1； -webkit动画填充模式：正向； } .容器：悬停.line{ 不透明度：1； 行程：100%； 笔划偏移：0； -webkit动画：输出300ms线性替换1； -webkit动画填充模式：正向； } @-中的webkit关键帧{ 从{ 笔划偏移：0； } 到{ 行程偏移：100%； } } @-webkit关键帧输出{ 从{ 行程偏移：100%； } 到{ 笔划偏移：0； } } JS-Bin

---

我在这里没有看到任何JavaScript，您尝试过这样做吗？我已经尝试了一段时间，使用MDN作为指导，但它不起作用。我想最好不要发布我的随机失败尝试。。。

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

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