目录
1.排他思想的含义
排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。
2.如何实现排他思想
（1）先将所有元素设置为一般状态
（2）再将特定元素设置为特殊效果
3.代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过对应方块变红</title>
<style>
ul{
margin: 0px;
padding: 0px;
list-style: none;
width:1000px;
height:800px;
background-color: #ccc;
}
li{
float: left;
width:200px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
</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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
<script>
var lis=document.getElementsByTagName("li");
for(let i=0;i<lis.length;i++)
{
lis[i].onmouseenter=function(){
for(let j=0;j<lis.length;j++){
lis[j].style.backgroundColor="#ccc";
}
lis[i].style.backgroundColor="red";
}
}
</script>
</body>
</html>
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
