当“li”悬停时，使用JavaScript更改“div”宽度

我想制作一个javascript代码，使div宽度为100%，具体取决于我的鼠标在哪个

li

上。以下是我的HTML代码：

<ul class="mylist" >
    <li class="onelist">
        <a href="#">Gallary</a>
        <div></div>
    </li>
    <li >
        <a href="#">Artists</a>
        <div></div>
    </li>
    <li>
        <a href="#">Videos</a>
        <div></div>
    </li>
    <li>
        <a href="#">About</a>
        <div></div>
    </li>
</ul>

---

此代码仅适用于第一个

li

。我希望它能在我的

ul

中的任何

li

上工作，您可以使用CSS实现相同的行为，并完全跳过编写JavaScript

---

首先，您需要获得所有的

那么，你会使用

var allLi = document.querySelectorAll('li');

然后，无需为

设置mouseenter/mouseleave函数，因为在鼠标进入/离开时无需执行任何操作

所以-现在您需要做的就是将鼠标进入/离开逻辑应用于所有

比如：

---

下面是代码“起作用”的证据

var allLi=document.queryselectoral（'li'）；
allLi.forEach（函数（li）{
li.onmouseinter=函数（）{
"严格使用",；
this.children[1].style.width=“100%”；
}
li.onmouseleave=函数（）{
"严格使用",；
此.children[1].style.width=“0”；
}
});
div{
背景：红色；
宽度：0；
溢出：隐藏；
}


DIV


DIV


DIV


DIV

StackOverflow不是一个免费的代码编写服务，希望你没事你是对的，我把我使用的js代码放在第一个（li）上，但它只适用于第一个（li），那么你认为问题出在哪里？你找到了一种方法吗？好吧，你需要所有的
li
。。。因此，首先，
var allLI=document.querySelectorAll（'li'）
。。。其次，你不会嵌套像这样的onmouse*函数好吧，我在var allLI=document.queryselectoral（'li'）之前尝试过这样使用，但它根本不起作用，我正在练习使用js，所以我想用js“它不起作用”。。。以什么方式？很难看出空div是否正在改变宽度（这是您的代码所具有的）。起初，我的代码应用于第一个（li），但现在它没有应用于任何（li），所以当我将鼠标放在任何lino上时，我的div宽度保持为0。它没有-请查看可运行的代码段-尽管，如果您使用的是internet explorer，那么代码将无法正常工作，它需要传输到internet explorer能够理解的东西上，您是否介意解释为什么要编写（函数（li））而不仅仅是（函数（）），因为
。forEach
使用每个
li
作为参数调用此回调
var allLi = document.querySelectorAll('li');

allLi.forEach(function(li) {
    li.onmouseenter = function() {
        'use strict';
         this.children[1].style.width = "100%";
    }
    li.onmouseleave = function() {
        'use strict';
         this.children[1].style.width = "0";
    }
});