javascript - css3 transition 和 javascript 出错了

Question

每当我单击“特殊链接”并将光标保持在子菜单框上时，一切正常，但是当我将光标移到框外时，它会按设置转换并将位置移动到左上角。如果您对此问题有任何建议/帮助以使其行为稳定，我将不胜感激。

附言。我只为 Chrome 设置了效果，所以没有对其他浏览器的视觉支持。

https://jsfiddle.net/34ho1fd9/

.option:hover
{
    font-style: normal;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    box-sizing: border-box;
    transition-property: background;
transition-duration: .4s;
left: 0;
top: 0;
-webkit-transform: skew(-25deg);
}

span.transition
{
display: inline-block;
}

.option:hover span.transition
{
-webkit-transform: skew(25deg);
}

.submenu
{
background-color: inherit;
position: fixed;
top: 34px;
left: 28px;
width: 200px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
-webkit-transform: skew(25deg);
}

.root
{
margin:0px;
padding:0px;
font-size: 18px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

Answer 1

发生的事情是 .submenu 也是您的 .option 的一部分。因此，当您使用 .submenu:hover 时，您同样会作用于其中包含的所有内容。

考虑只在 :hover 中放入悬停时真正需要的内容(背景色)，而不是应用一大堆同样可以“预应用”的样式:

.option
{
  font-style: normal;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: background;
  transition-duration: .4s;
  left: 0;
  top: 0;
  -webkit-transform: skew(-25deg);
}
.option:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.option .submenu {
  background-color: rgba(0, 0, 0, 0.3);
}


.option span.transition
{
  -webkit-transform: skew(25deg);
}

查看更新后的 Fiddle:https://jsfiddle.net/34ho1fd9/4/