Question

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

ALAuthorizationStatus status = [ALAssetsLibrary authorizationStatus];
switch (status) {
    case ALAuthorizationStatusNotDetermined: {
        // not determined
        break;
    }
    case ALAuthorizationStatusRestricted: {
        // restricted
        break;
    }
    case ALAuthorizationStatusDenied: {
        // denied
        break;
    }
    case ALAuthorizationStatusAuthorized: {
        // authorized
        break;
    }
    default: {
        break;
    }
}

//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%;
}

Answer 1

从css中删除.menu:hover以防止它在悬停时进行翻转添加jquery文件，以便你可以使用jquery函数

＆＃13;

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

＆＃13;

/*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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

这样的东西？

https://jsfiddle.net/qabf8ewa/1/

.menu:hover,
.permahover {
}

此选择器在悬停时应用该类，而不仅仅是在您想要的时候点击

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

Answer 3

检查此demo

还对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;


}

CSS点击鼠标悬停

3 个答案: