<!DOCTYPE html>
<html>
<head>
<title>Simple Todo</title>
<link rel="stylesheet" href="source.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>TO-DO LIST</h2>
<button id="slide">here!</button>
<div>
<input type="text" placeholder="Add New Todo">
</div>
<ul>
<li>Buy Robes<button>Delete</button></li>
<li>Go shopping<button>Delete</button></li>
<li>Buy noodles<button>Delete</button></li>
</ul>
</div>
<script type="text/javascript" src="source.js"></script>
</body>
</html>
这是 html 文件。
var li=document.querySelectorAll("ul li");
var btn=document.querySelectorAll("li button");
for(i=0;i<li.length;i++){
li[i].addEventListener("mouseover",function(){
btn[i].style.display="block";
});
}
这是链接到它的js。
我已将按钮设置为 display:none; 在 css 中。但是当我将鼠标悬停在 li 上时，它似乎不起作用。
let在声明块作用域局部变量的 for 循环中使用。您正在尝试设置display="block"为已经可见的元素。首先display: none使用 CSS设置这些元素：
var li = document.querySelectorAll("ul li");
var btn = document.querySelectorAll("li button");
for(let i=0;i<li.length;i++){
li[i].addEventListener("mouseover",function(){
btn[i].style.display="block";
});
}li > button{
display: none;
}<div class="container">
<h2>TO-DO LIST</h2>
<button id="slide">here!</button>
<div>
<input type="text" placeholder="Add New Todo">
</div>
<ul>
<li>Buy Robes<button>Delete</button></li>
<li>Go shopping<button>Delete</button></li>
<li>Buy noodles<button>Delete</button></li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句