Question

将光标悬停在一个菜单项上后，如果在变换完成之前稍微移动光标，变换将再次开始。当你摇动你在菜单项上移动一点时，它会一次又一次地发生。我怎样才能克服这个问题？

<ul id="menu-1">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
</ul>

ul#menu-1 {
    list-style: none;
    margin-left: 0;
    width:100%
}
ul#menu-1 li{
  background: #000;
    display: inline-block;
    margin-bottom: 0.25em;
    min-width: 15.87%;
    animation: elmtoFront 1.2s linear normal forwards;
}

ul#menu-1 li a {
    display:block;
color: #fff;
    padding: 0.5em 1.5em;
    text-decoration:none;
}
ul#menu-1 li a:hover{
    transition: 1.2s ease-in-out;
    transform-style: preserve-3d;    
    transform: rotateY(-360deg);
    animation:elmtoBack 1.2s linear normal forwards;
}
@keyframes elmtoBack {  
  0% {z-index:0;}
  100% {z-index:1;}
}
@keyframes elmtoFront {
  0% {z-index:1;}
  100% {z-index:0;}
}

仅供参考：https://jsfiddle.net/anushkakrajasingha/bpp48a15/6/

Answer 1

更改此

ul#menu-1 li a:hover{

到这个

ul#menu-1 li:hover a{

Fiddle

Answer 2

为该物业提供另类选择，如下所示

将ul#menu-1 li a:hover更改为ul#menu-1 li:hover a

ul#menu-1 li:hover a{
    transition: 1s ease-in-out;
    transform-style: preserve-3d;    
    transform: rotateY(-360deg);
    animation:elmtoBack 1.2s linear normal forwards;
}

Answer 3

我不会专注于解决方案，因为已经在其他答案中对此进行了描述，但是他们没有解释为什么会这样发生。所以，我会解释一下。

<强>原因：

这是因为您在rotateY元素上使用a转换。当使用这种变换时，元素的边界随着元素的旋转而变得越来越小。因此，当我们在转换过程中移动光标时，我们实际上悬停然后返回元素的可能性很高。如您所知，这将重新触发hover选择器以应用，从而重新启动转换。

例如，看看下面的代码片段，看看元素的边框在转换发生时如何缩小。当您从框的边缘悬停时，重启效果将会发音，因为当光标尺寸缩小时，光标会快速移出框。

＆＃13;

.transformed {
  height: 200px;
  width: 200px;
  background: yellowgreen;
  border: 3px solid black;
  transition: all 1s;
}
.transformed:hover {
  transform: rotateY(-360deg);
]

＆＃13;

<div class='transformed'>Some content</div>

＆＃13;

<强>解决方案：

正如其他答案中所述，将:hover放在li上，并在a悬停时设置li的样式。完成此操作后，li边界永远不会改变，因此光标位置实际上永远不会超出元素。因此，:hover选择器没有重新触发，也没有重启。

＆＃13;

ul#menu-1 {
  list-style: none;
  margin-left: 0;
  width: 100%
}
ul#menu-1 li {
  background: #000;
  display: inline-block;
  margin-bottom: 0.25em;
  min-width: 15.87%;
  animation: elmtoFront 1.2s linear normal forwards;
}
ul#menu-1 li a {
  display: block;
  color: #fff;
  padding: 0.5em 1.5em;
  text-decoration: none;
}
ul#menu-1 li:hover a {
  transition: 1.2s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-360deg);
  animation: elmtoBack 1.2s linear normal forwards;
}
@keyframes elmtoBack {
  0% {
    z-index: 0;
  }
  100% {
    z-index: 1;
  }
}
@keyframes elmtoFront {
  0% {
    z-index: 1;
  }
  100% {
    z-index: 0;
  }
}

＆＃13;

<ul id="menu-1">
  <li><a href="#">Menu Item 1</a>
  </li>
  <li><a href="#">Menu Item 2</a>
  </li>
  <li><a href="#">Menu Item 3</a>
  </li>
  <li><a href="#">Menu Item 4</a>
  </li>
  <li><a href="#">Menu Item 5</a>
  </li>
  <li><a href="#">Menu Item 6</a>
  </li>
</ul>

＆＃13;

在悬停

3 个答案: