javascript - CSS悬停在点击

Question

我的主页中间有一个 html 无序菜单列表。单击其中一个元素时，我希望它移动到最左边并留在那里。 但是我的代码使菜单在鼠标悬停时悬停在左侧(不是单击)，然后菜单返回到中间的原始位置，而不是留在左侧。 有帮助吗？

//jQuery
$(".menu").on("click", function () {
  $(".menu").addClass('permahover');
});

/*CSS*/
.menu{

  width:150px;
  height: 350px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; 
  border-style:none;   
  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;
}

.menu:hover,
.permahover{
  opacity: 1;
  width: 70%;
}

<!--HTML-->

<div id="menu" class="menu">
  <ul class="headlines">
    <li id="item1"onclick="checklist(this)">a</li>
    <li id="item2">s  </li>
    <li id="item3">d  </li>
    <li id="item4">d  </li>
    <li id="item5">F  </li>
    <li id="item6">Ta </li>
    <li id="item7">s  </li>
  </ul>
</div>

Answer 1

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

//jQuery
$(".menu").on("click", function () {
  $(".menu").addClass('permahover');
});

/*CSS*/
.menu{
  width:150px;
 height: 350px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0px;
  right: 0;
  margin: auto; 
  border-style:none; 
}
  .menu li{  
  position: relative;
  top:0;
  bottom: 0;
  left: 0px;
  right: 0;
}
#item7{
  transition: opacity .8s, left .8s ease-out;
  -moz-transition: opacity .8s, left .8s ease-out;
  -webkit-transition: opacity .8s, left .8s ease-out;
  -o-transition: opacity .8s, left .8s ease-out;
}
#item6{
  transition: opacity 1s, left 1s ease-out;
  -moz-transition: opacity 1s, left 1s ease-out;
  -webkit-transition: opacity 1s, left 1s ease-out;
  -o-transition: opacity 1s, left 1s ease-out;
}
#item5{
  transition: opacity 1.2s, left 1.2s ease-out;
  -moz-transition: opacity 1.2s, left 1.2s ease-out;
  -webkit-transition: opacity 1.2s, left 1.2s ease-out;
  -o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
  transition: opacity 1.4s, left 1.4s ease-out;
  -moz-transition: opacity 1.4s, left 1.4s ease-out;
  -webkit-transition: opacity 1.4s, left 1.4s ease-out;
  -o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
  transition: opacity 1.6s, left 1.6s ease-out;
  -moz-transition: opacity 1.6s, left 1.6s ease-out;
  -webkit-transition: opacity 1.6s, left 1.6s ease-out;
  -o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
  transition: opacity 1.8s, left 1.8s ease-out;
  -moz-transition: opacity 1.8s, left 1.8s ease-out;
  -webkit-transition: opacity 1.8s, left 1.8s ease-out;
  -o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
  transition: opacity 2s, left 2s ease-out;
  -moz-transition: opacity 2s, left 2s ease-out;
  -webkit-transition: opacity 2s, left 2s ease-out;
  -o-transition: opacity 2s, left 2s ease-out;
}
.permahover li{
  opacity: 1;
  left: -135%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--HTML-->

<div id="menu" class="menu">
  <ul class="headlines">
    <li id="item1"onclick="checklist(this)">a</li>
    <li id="item2">s  </li>
    <li id="item3">d  </li>
    <li id="item4">d  </li>
    <li id="item5">F  </li>
    <li id="item6">Ta </li>
    <li id="item7">s  </li>
  </ul>
</div>