Question

＆＃13;

	var ul=document.getElementsByTagName('ul')[0];
	ul.addEventListener('mouseover',function(e){
		if(e.target.tagName.toUpperCase()=="LI"){
			e.target.style.border='1px solid red';
		}
	})

＆＃13;

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

＆＃13;

<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>

＆＃13;

我编写代码，当鼠标在第二行从右到左翻过li，然后鼠标悬停在第一行，第二行li下降，如果为所有li标签添加边框，则错误将消失，但我想知道为什么，谁可以教我？谢谢。

Answer 1

＆＃13;

var ul = document.getElementsByTagName('ul')[0];
ul.addEventListener('mouseover',function(e){
    if (e.target.tagName.toUpperCase() === "LI") {
        e.target.style.border = '1px solid red';
    }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

为li添加边框时，会出现错误

1 个答案: