Question

我想制作一个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>

这是我的JS代码：

var list = document.querySelector('ul'),
    li = document.querySelector('li');

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

list.onmouseleave = function () {
    'use strict';
    li.onmouseleave = function () {
        'use strict';
        this.children[1].style.width = "0";
    }
}

此代码仅适用于前li。我希望它可以在li中的任何ul上使用。

Answer 1

您可以使用CSS实现相同的行为，而完全跳过编写JavaScript。

https://www.w3schools.com/cssref/sel_hover.asp

Answer 2

首先，您需要获取所有<li>

所以，您将使用

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

然后，<UL>不需要鼠标输入/剪切功能，因为鼠标输入/离开无需进行任何操作

所以-现在您要做的就是将鼠标输入/离开逻辑应用于所有<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";
    }
});

这是证明，代码可以正常工作

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";
    }
});

div {
background:red;
width:0;
overflow:hidden;
}

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

当悬停`li`时，使用JavaScript更改`div`的宽度

2 个答案: