var ul=document.getElementsByTagName('ul')[0];
ul.addEventListener('mouseover',function(e){
if(e.target.tagName.toUpperCase()=="LI"){
e.target.style.border='1px solid red';
}
}) ul,li{
margin:0px;
padding:0px;
}
ul{
margin:200px;
width:560px;
height:500px;
border:1px solid red;
}
li{
width:100px;
height:100px;
background:green;
float:left;
list-style:none;
margin:0px 10px 10px 0px ;
}<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>我写的代码，当鼠标从右到左第二行的li上，然后鼠标悬停在第一行，第二个li下降，如果给所有li标签加边框，错误就会消失，但我想知道为什么，谁能教我？谢谢。
最佳答案
var ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('mouseover',function(e){
if (e.target.tagName.toUpperCase() === "LI") {
e.target.style.border = '1px solid red';
}
})ul, li {
margin: 0px;
padding: 0px;
}
ul {
margin: 200px;
width: 560px;
height: 500px;
border: 1px solid red;
}
li {
width: 100px;
height: 100px;
background: green;
float: left;
list-style: none;
margin: 0px 10px 10px 0px;
border: 1px solid green;
}<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>关于html - 为li添加边框时出现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31158731/