Javascript CSS鼠标悬停在单击上 我的主页中间有一个HTML无序菜单列表。当点击其中一个元素时，我希望它移到最左边并保持在那里。 然而，我的代码使菜单在滚动时悬停在左侧（而不是单击），然后菜单返回到中间的原始位置，而不是停留在左侧。 有什么帮助吗

//jQuery
$（“.menu”）。在（“单击”上，函数（）{
$（“.menu”）.addClass（'permahover'）；
});
/*CSS*/
.菜单{
宽度：150px；
高度：350px；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
边框样式：无；
过渡：不透明度.8s，宽度.8s减缓；
-moz过渡：不透明度.8s，宽度.8s，放松；
-webkit过渡：不透明度.8s，宽度.8s，放松；
-o型过渡：不透明度.8s，宽度.8s缓和；
}
.菜单：悬停，
permahover先生{
不透明度：1；
宽度：70%；
}


a
s
d
d
F
Ta
s

从css中删除
.menu:hover
，以防止它在悬停时滚动
添加jquery文件，以便您可以使用jquery函数


//jQuery
$（“.menu”）。在（“单击”上，函数（）{
$（“.menu”）.addClass（'permahover'）；
});
/*CSS*/
.菜单{
宽度：150px；
高度：350px；
位置：绝对位置；
排名：0；
底部：0；
左：0px；
右：0；
保证金：自动；
边框样式：无；
}
.menu li{
位置：相对位置；
排名：0；
底部：0；
左：0px；
右：0；
}
#项目7{
过渡：不透明度。8秒，左。8秒放松；
-moz过渡：不透明度.8s，左.8s减弱；
-webkit过渡：不透明度。8秒，左。8秒缓解；
-o型过渡：不透明度。8秒，左。8秒缓和；
}
#项目6{
过渡：不透明度1s，左1s缓和；
-moz过渡：不透明度1s，左1s缓和；
-webkit过渡：不透明度1秒，左1秒，放松；
-o型过渡：不透明度1s，左1s缓和；
}
#项目5{
过渡：不透明度1.2秒，左1.2秒缓和；
-moz过渡：不透明度1.2s，左1.2s缓和；
-webkit过渡：不透明度1.2秒，左1.2秒缓和；
-o型过渡：不透明度1.2s，左1.2s缓和；
}
#项目4{
过渡：不透明度1.4s，左1.4s变缓；
-moz过渡：不透明度1.4s，左1.4s缓变；
-webkit过渡：不透明度1.4s，左1.4s缓解；
-o型过渡：不透明度1.4s，左1.4s；
}
#项目3{
过渡：不透明度1.6s，左1.6s缓和；
-moz过渡：不透明度1.6s，左1.6s缓和；
-webkit过渡：不透明度1.6s，左1.6s缓和；
-o型过渡：不透明度1.6s，左1.6s缓和；
}
#项目2{
过渡：不透明度1.8秒，左1.8秒缓和；
-moz过渡：不透明度1.8秒，左1.8秒放松；
-webkit过渡：不透明度1.8秒，左1.8秒缓变；
-o型过渡：不透明度1.8秒，左1.8秒缓变；
}
#项目1{
过渡：不透明度2秒，左2秒缓和；
-moz过渡：不透明度2秒，左2秒放松；
-webkit过渡：不透明度2秒，左2秒放松；
-o型过渡：不透明度2秒，左2秒缓和；
}
李先生{
不透明度：1；
左-135%；
}


a
s
d
d
F
Ta
s

像这样的东西


这个选择器是在悬停时应用类，而不是在单击时应用类

$("li").on("click", function () {
   $(this).parent("ul").addClass('permahover');
});

检查这个

在css代码中也做了一些更改

.menu{
  width:100%;  
  position: relative;
  border-style:none;   

}
.headlines{
   margin:0px auto;
}
.headlines li{
  width:150px;
  margin:0px auto;
  transition: opacity .8s, width .8s ease-out;
  -moz-transition: opacity .8s, width .8s ease-out;
  -webkit-transition: opacity .8s, width .8s ease-out;
  -o-transition: opacity .8s, width.8s ease-out;
   position:relative;
}

.permahover{
  opacity: 1;
  width:100% !important;


}

因此，只在
上保留
.permahover{
。菜单：悬停，.permahover{
行对不起，我不明白你想让我做什么，，，，我是JavaScript新手删除
。菜单：从CSS中悬停
，并保持它为
。permahover
我删除了CSS中的指定行。但是它不起作用。。我在哪里使用jquery源代码？你使用jquery进行“单击”事件…所以你需要包含jque在html中使用TagDarry源代码亲爱的，它起作用了。谢谢。只有一件事…我可以用某种方式操纵它吗？当我单击一个元素时，它会以三角形的边（/）的形式移到最左边在采用代码u中显示的最终形式之前。因此，您希望所有项目都以不同的速度移动？？是的，如果这将使其以三角形边的形式向左移动，如下图所示-->/
.menu{
  width:100%;  
  position: relative;
  border-style:none;   

}
.headlines{
   margin:0px auto;
}
.headlines li{
  width:150px;
  margin:0px auto;
  transition: opacity .8s, width .8s ease-out;
  -moz-transition: opacity .8s, width .8s ease-out;
  -webkit-transition: opacity .8s, width .8s ease-out;
  -o-transition: opacity .8s, width.8s ease-out;
   position:relative;
}

.permahover{
  opacity: 1;
  width:100% !important;


}