训练目标 能够使用 css(),设置样式 训练提示
1.鼠标进入li,所有li,透明度设置为1,当前的为0.4 2.移开后,所有li,透明度全部设置为1. 3.mouseenter()、mouseleave()没有冒泡,也可以参考hover(
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="/jQ20220215Day44/js/jquery3.6.0.js"></script><style>body{text-align: center;}</style>
</head>
<body>
aaaa<p> aaaaa </p>
<script>var body=document.querySelector('body')for (var i=0;i<6;i++){var div=document.createElement('div')div.innerHTML='<img src='+"'product1.png'"+'alt=""/>'// dom对象设置样式div.style.backgroundColor='red'div.style.display='inline-block'div.style.marginLeft='10px'div.style.marginBottom='10px'div.style.opacity='0.4'// div.style.width='100px'// div.style.height='100px'body.appendChild(div)//添加到body中if (i==2){body.appendChild(document.createElement('br'))}}$(function (){//jQuery 对象 当鼠标移动到上面时$('div').mouseenter(function (){$(this).css('opacity','1')})})$(function (){$('div').mouseleave(function (){//jQuery 对象 当鼠标不在当前对象上$(this).css('opacity','0.4')})})</script></body>
</html>