Question

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

PS。我只为Chrome设置了效果，因此没有其他浏览器的视觉支持。

.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（背景颜色）中放置你真正需要的: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);
}

查看此更新的小提琴：https://jsfiddle.net/34ho1fd9/4/

css3过渡和javascript出错了

1 个答案: