我究竟如何使用mouseenter和mouseleave？

时间：2014-11-02 15:14:56

标签： javascript jquery html css svg

我有一个svg行在css中父div的悬停时激活，但我不能让动画在离开div时反转，所以我试图使用带有mouseenter / mouseleave的jquery。这就是我现在所拥有的：

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

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

1 个答案:

答案 0 :(得分：0)

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

  1. 我重建了动画：现在我们有两种类型的动作： in 和 out
    2. 将
  2. .line 类添加到行以缩短重复代码
  3. 在正常状态下，SVG行有 out 动画，在：hover 上，他们移动
  4. 我已从行中删除了不透明度：0 ，因为在您的示例中，当鼠标移出时，线条变得不可见

    5. 这不是完美的解决方案，但它是实验更多的方法。

    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>

    P.S。在不同的分辨率下，您的线条会有不同的交叉（见下图）。

    Cross 1 Cross 2

    编辑：这不是你的关于mouseenter和mouseleave的问题的答案，但在这种情况下，你可以在不使用脚本的情况下解决问题。

    无论如何，如果您愿意，可以查看悬停方法（http://api.jquery.com/hover/）。对于带有 和 out 动画的SVG行，您可以为 .in 和 .out 提供两个类，并添加它们像那样盘旋：

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

    按钮和 svg 是相应元素的jQuery对象。

相关问题
最新问题