时间戳

首页 > 解决方案 > 悬停+点击联合动作

javascript - 悬停+点击联合动作

问题描述

我想要一个菜单​​，它在悬停时变得“活跃”，然后点击保持那个活跃的类，即使鼠标离开，但如果没有点击，那个活跃的类就会被删除。

我尝试了几种选择，但我无法找出一种可行的方法。一开始，我有两个不同的功能，但是当点击时， :hover 会接管并删除活动类..

首字母为红色。悬停时，应移动到悬停的链接/颜色。如果没有点击，应该回到红色。如果被点击，body class 应该保持被点击的那个。

我在想一个功能

hover(
change class to hovered item (red/yellow/blue)
)
mouseleaves(
if have been clicked-> do nothing (keep class of hovered item)
if have not been clicked -> revert to initial class
)

https://codepen.io/ifeltblankk/pen/BqWyya

  $(document).ready(function() {  
      
      var initialClass = $( "body" ).attr('class');
    
      $('.nav.desktop li').hover(
      
       function(){
             $( "body").removeClass();
             var Hoverclass = $(this).attr('class');
             $( "body" ).addClass(Hoverclass);
         
              $(this).click(function () {
                
                
              });
         },
         function(){
               $( "body").removeClass();
               $( "body" ).addClass(initialClass);
           
              $(this).click(function () {
                  $( "body" ).addClass(initialClass);
              });
         }
     
      
    );
   
    
}); 
ul.nav{
 position:fixed;
  top:20px;
  left:50px;
}

.color{
  width:20px;
  height:20px;
  background-color:grey;
  position:fixed;
  top:0px;
  left:10px;
  display:block;
}

body.red .color{
  background-color:red;
  top:30px;
}

body.blue .color{
  background-color:blue;
  top:50px;
}

body.yellow .color{
  background-color:yellow;
  top:70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="red">

   <div class="color">
      
  </div>
  <ul class="nav desktop">
    <li class="red">
      Red
    </li>
   <li class="blue">
      Blue
    </li>
    <li class="yellow">
      Yellow
    </li>		<br><br>
    <li>
    The idea is <br>
    hover(<br>
    change body class to hovered item (red/yellow/blue)<br>
    )<br>
    mouseleaves(<br>
    if have been clicked-> do nothing (keep class of hovered item)<br>
    if have not been clicked -> revert to initial class<br>
    )</li>		
  </ul>



</body>

标签： javascriptjqueryhtmlcsshover

解决方案

此版本的逻辑在鼠标悬停时应用一个活动类，并在鼠标移出时将其删除。这会使红色移动。然后，如果您单击 li 以（取消）选择它，它会切换蓝色以显示是否选择了一行。

$(document).ready(function() {
  $('.nav.desktop li')
    .on('click', function(){
      $(this).toggleClass('clicked');
    })
    .on('mouseenter', function(){
      $(this).addClass('active');
    })
    .on('mouseleave', function(){
      $(this).removeClass('active');
    });
});
.active:not(.clicked) {
  background-color: rgb(255, 0, 0);
}

.clicked {
  background-color:rgb(0, 0, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav desktop">
  <li>
    Lien 1
  </li>
  <li>
    Lien 2
  </li>
  <li>
    Lien 3
  </li>
</ul>

推荐阅读