换成javascript代码$(function () {$(".l-list").children("li").hover(function () {$(this).css({ backgroundColor: "#ff6700" }).siblings().css({ backgroundColor: "transparent" });
时间: 2024-04-02 11:34:26 浏览: 20
document.addEventListener("DOMContentLoaded", function() {
let lList = document.querySelector(".l-list");
let liList = lList.children;
for(let i = 0; i < liList.length; i++) {
liList[i].addEventListener("mouseenter", function() {
this.style.backgroundColor = "#ff6700";
for(let j = 0; j < liList.length; j++) {
if(j != i) {
liList[j].style.backgroundColor = "transparent";
}
}
});
liList[i].addEventListener("mouseleave", function() {
this.style.backgroundColor = "";
});
}
});
相关问题
将下面的jquery换成javascript代码$(function () { //4.banner旁菜单l-list $(.l-list).children(li).hover(function () { $(this).css({ backgroundColor: #ff6700 }).siblings().css({ back
document.addEventListener("DOMContentLoaded", function() {
let lList = document.querySelector(".l-list");
let liList = lList.children;
for(let i = 0; i < liList.length; i++) {
liList[i].addEventListener("mouseenter", function() {
this.style.backgroundColor = "#ff6700";
for(let j = 0; j < liList.length; j++) {
if(j != i) {
liList[j].style.backgroundColor = "";
}
}
});
liList[i].addEventListener("mouseleave", function() {
this.style.backgroundColor = "";
});
}
});
换成javascript代码$(this).children(".child-list").css({ display: "block" }).parent().siblings().children(".child-list").css({ display: "none" }); $(this).find("li").hover(function () { $(this).css({ color: "#ff6700" }) }, function () { $(this).css({ color: "#333" }) })
document.addEventListener("DOMContentLoaded", function() {
let parentList = document.querySelectorAll(".l-list > li");
for(let i = 0; i < parentList.length; i++) {
parentList[i].addEventListener("mouseenter", function() {
let childList = this.querySelector(".child-list");
childList.style.display = "block";
for(let j = 0; j < parentList.length; j++) {
if(j != i) {
parentList[j].querySelector(".child-list").style.display = "none";
}
}
});
let liList = parentList[i].querySelectorAll("li");
for(let j = 0; j < liList.length; j++) {
liList[j].addEventListener("mouseenter", function() {
this.style.color = "#ff6700";
});
liList[j].addEventListener("mouseleave", function() {
this.style.color = "#333";
});
}
}
});
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)