如何在hover js上的3个类之间切换

How to toggle between 3 classes on hover js

本文关键字：之间 3个 上的 hover js      更新时间：2023-09-26

我有一个无序的列表，里面有4项。鼠标悬停时，它应该增长到ul宽度的100%，所有"名词悬停li"都应该缩小到0%宽度。当鼠标离开时，它们都应该回到25%宽度的初始状态。类似于：

<ul id="menu2">
  <li class="color"></li>
  <li class="color"></li>
  <li class="color"></li>
  <li class="color"></li>
</ul>

css

#menu2{
overflow: hidden;
padding-left: 0;
padding-right: 0;
margin: 0;
}
.color{
display: inline-block;
position: relative;
list-style: none;
float: left;
height: 110px;
margin-right: 0;
width: 25%;
background-color: blue;
cursor: pointer;
}
.stateHovered{
    width: 100%;
    transition: all 500ms ease-out;
    background-color: #FAA500;
}
.stateOff{
    width: 0;
}

js

function addListeners(){
document.getElementById('menu2').children.addEventListener("mouseover", toggleClassFunction);
    function toggleClassFunction() {
        for(i = 0; i < menu2.length; i++) {
            if(menu2[i] !=this) {
                menu2[i].className = "stateOff";
            }else if(menu2[i] === this){
                menu2[i].className = "stateHovered";
            }else {
                menu2[i].className = "color";
                }
        }
    }   
}
window.addEventListener("load", addListeners);

最终结果，不起作用。。

On"mouseover"根据需要将类设置为"stateOff"或"stateHovered"。然后在"mouseout"中，将它们设置回"color"。如果你可以使用jQuery，它是相当直接的，尽管我认为你可能会想摆弄一下CSS：

$(document).ready(function(){
    $('#menu2 li').mouseover(function(){
        //Instead of trying to figure out who is who, just set them all to "stateOff"
        $('#menu2 li').attr('class','stateOff');
      
        //Then set "this" to "stateHovered".
        $(this).attr('class','stateHovered');
      
        //The browser won't render any changes until the script finishes running,
        //So you don't have to worry about "this" jumping back and forth between
        //two styles.
    });
    
    
    $('#menu2 li').mouseout(function(){
        $('#menu2 li').attr('class','color');
    });
});
menu2{
overflow: hidden;
padding-left: 0;
padding-right: 0;
margin: 0;
}
.color{
display: inline-block;
position: relative;
list-style: none;
float: left;
height: 110px;
margin-right: 0;
width: 25%;
background-color: blue;
cursor: pointer;
}
.stateHovered{
    width: 100%;
    transition: all 500ms ease-out;
    background-color: #FAA500;
}
.stateOff{
    width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu2">
  <li class="color">A</li>
  <li class="color">B</li>
  <li class="color">C</li>
  <li class="color">D</li>
</ul>

相关文章：