Javascript 将鼠标悬停在子li上时更改父div背景

我试图改变一个父div的背景图像，它有一些ulli。HTML代码如下所示：-

    <section class="list" id="services"> 
    <div class="row">
        <ul>
            <li><a href="automation.html" class="list-item"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="research.html" class="list-item"> <span class="desc">About the page</span><span class="title">R&D</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="ui.html" class="list-item"> <span class="desc">About the page</span><span class="title">UI/UX</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>         
            <li><a href="webdev.html" class="list-item"> <span class="desc">About the page</span><span class="title">Web Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="mobile.html" class="list-item"> <span class="desc">About the page</span><span class="title">Mobile App Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="market.html" class="list-item"> <span class="desc">About the page</span><span class="title">Digital Marketing</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="gaming.html" class="list-item"> <span class="desc">About the page</span><span class="title">Gaming</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="business.html" class="list-item"> <span class="desc">About the page</span><span class="title">Our Business</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="faq.html" class="list-item"> <span class="desc">About the page</span><span class="title">FAQ</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="about.html" class="list-item"> <span class="desc">About the page</span><span class="title">About Us</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
        </ul>
    </div>
</section>

它不起作用。此外，背景图像应根据相关类别进行更改。例如，如果我将鼠标悬停在automation li上，则应加载相应的图像作为背景。我还尝试了以下方法：-

HTML

JS

var el=document.getElementById（“服务”）；
el.addEventListener（“鼠标覆盖”，服务）；
职能服务（e）{
e、 currentTarget.className=e.target.getAttribute（'data-class'）；
}

---

这是在销毁“list”类并向其附加一个“null”类。知道怎么了吗？我是JS的新手，我正在努力学习。非常感谢您的帮助。

通常，纯css无法提供帮助。但它支持级联方向的样式，而不是向上

你可以考虑这个伪标记：

<parent>
   <sibling></sibling>
   <child></child>
</parent>

问题中示例的这个技巧导致

---

你可以试试这个。

好吧，当你尝试这样的事情时，你谈论的是父选择器：

.list ul li a:hover.list{background image:url（'some.jpg'）；

这不可能只通过CSS输入

现在我们有了另一个使用JavaScript的选项。您在有问题的帖子中尝试的脚本不是完整的解决方案。我尝试了使用您的标记的我自己的方式，请查看下面是否适合您：

<section class="list" id="services"> 
    <div class="row">
        <ul>
            <li><a href="automation.html" class="list-item" data-class="someclass-1"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="research.html" class="list-item" data-class="someclass-2"> <span class="desc">About the page</span><span class="title">R&D</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="ui.html" class="list-item" data-class="someclass-3"> <span class="desc">About the page</span><span class="title">UI/UX</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>         
            <li><a href="webdev.html" class="list-item" data-class="someclass-4"> <span class="desc">About the page</span><span class="title">Web Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="mobile.html" class="list-item" data-class="someclass-5"> <span class="desc">About the page</span><span class="title">Mobile App Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="market.html" class="list-item" data-class="someclass-6"> <span class="desc">About the page</span><span class="title">Digital Marketing</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="gaming.html" class="list-item" data-class="someclass-7"> <span class="desc">About the page</span><span class="title">Gaming</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="business.html" class="list-item" data-class="someclass-8"> <span class="desc">About the page</span><span class="title">Our Business</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="faq.html" class="list-item" data-class="someclass-9"> <span class="desc">About the page</span><span class="title">FAQ</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="about.html" class="list-item" data-class="someclass-10"> <span class="desc">About the page</span><span class="title">About Us</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
        </ul>
    </div>
</section>

---

例如，如果我将鼠标悬停在automation li上，相应的图像应作为背景加载

相应的图像在哪里？您的css无法工作，因为使用此语法a:hover.list将*在a标记中搜索未包含类列表的子体parent@brk我可以用CSS来分配。我只是想解释一下。@mostafatour是的，你说得很对。我了解到我们不能通过CSS以父元素为目标。所以我认为jQuery是唯一的解决方案。不，jQuery不是唯一的解决方案，我将为你提供许多简单的解决方案

<script> var el = document.getElementById("services");
el.addEventListener("mouseover", services);
function services(e) {
        e.currentTarget.className = e.target.getAttribute('data-class');
}
</script>

<parent>
   <sibling></sibling>
   <child></child>
</parent>

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

<section class="list" id="services"> 
    <div class="row">
        <ul>
            <li><a href="automation.html" class="list-item" data-class="someclass-1"> <span class="desc">About the page</span><span class="title">Automation</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="research.html" class="list-item" data-class="someclass-2"> <span class="desc">About the page</span><span class="title">R&D</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="ui.html" class="list-item" data-class="someclass-3"> <span class="desc">About the page</span><span class="title">UI/UX</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>         
            <li><a href="webdev.html" class="list-item" data-class="someclass-4"> <span class="desc">About the page</span><span class="title">Web Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="mobile.html" class="list-item" data-class="someclass-5"> <span class="desc">About the page</span><span class="title">Mobile App Development</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="market.html" class="list-item" data-class="someclass-6"> <span class="desc">About the page</span><span class="title">Digital Marketing</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="gaming.html" class="list-item" data-class="someclass-7"> <span class="desc">About the page</span><span class="title">Gaming</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="business.html" class="list-item" data-class="someclass-8"> <span class="desc">About the page</span><span class="title">Our Business</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="faq.html" class="list-item" data-class="someclass-9"> <span class="desc">About the page</span><span class="title">FAQ</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
            <li><a href="about.html" class="list-item" data-class="someclass-10"> <span class="desc">About the page</span><span class="title">About Us</span><span class="nav-icon"><i class="fa fa-chevron-right"></i></span></a></li>
        </ul>
    </div>
</section>

var parent = document.getElementById("services");

var acnhors = document.querySelectorAll(".list > .row > ul > li > a");

for(var i = 0; i < acnhors.length; i ++){
  acnhors[i].addEventListener("mouseover", inHover);
  acnhors[i].addEventListener("mouseout", outHover);
}

function inHover(e){
  parent.classList.add(this.getAttribute('data-class'));
}
function outHover(e){
  parent.classList.remove(this.getAttribute('data-class'));
}