核心是：触碰到哪里，记住是触碰哈，因为not所以触碰的没有效果，其他的都有效果，问题什么效果？
opacity: .2;
filter: alpha(opacity=20);
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{
padding: 0px;margin: 0px;}.box1{
width: 400px;margin: 20px auto;}.box1 li{
float: left;margin: 5px;}img{
width: 100px;height: 100px;}.box1:hover li:not(:hover)/*核心是碰到任何的li，除了这个都有效果*//*问题，什么效果， opacity: .2;filter: alpha(opacity=20);？浏览器兼容问题第一个是0~1哈,第二个是0~100*/{
/*filter与opacity一样都是设置透明度的，但是opacity 在IE8及以下是不兼容的；所以要设置filter属性；懂了把，啊哈哈哈*/opacity: .2;filter: alpha(opacity=20);}</style>
</head>
<body><ul class="box1"><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li></ul>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{
padding: 0px;margin: 0px;}.box1{
width: 400px;margin: 20px auto;}.box1 li{
float: left;margin: 5px;}img{
width: 100px;height: 100px;}li:hover/*点某一个li哪一个就透明*/{
opacity: .2;filter: alpha(opacity=20);}</style>
</head>
<body><ul class="box1"><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li></ul>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{
padding: 0px;margin: 0px;}.box1{
width: 400px;margin: 20px auto;}.box1 li{
float: left;margin: 5px;}img{
width: 100px;height: 100px;}.box1:hover li:not(:hover)/*不触碰的都透明，触碰的不透明（清晰）最核心的忘记了哈哈哈，是 .box1:hover意思我触碰的是class为box1的，li:not(:hover)然后是li的哪一个透明或者不透明呢是不触碰的都透明，触碰的不透明（清晰）*/{
opacity: .2;filter: alpha(opacity=20);}</style>
</head>
<body><ul class="box1"><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li><li><img src="./1.jpg"></li></ul>
</body>
</html>
触碰的不透明，不触碰的都透明.