当孩子盘旋时，更改父div背景

时间：2017-12-30 05:17:56

标签： javascript jquery html css

我正在尝试更改父div的背景图像，其中包含一些ul li。 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>

班级“列表”有背景图片。当用户将鼠标悬停在li a上时，我正在尝试更改“列表”的背景图像。这就是我试过的： - 

   .list ul li a:hover .list {background-image: url('some.jpg');

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

HTML 

<li><a href="automation.html" class="list-item" data-class="someclass"> <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>

JS 

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

这会破坏“list”类并向其附加“null”类。有什么想法错了吗？我是JS的新手，我正在努力学习这一点。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分：0)

通常它不能用纯css完成。但它支持级联方向的样式，而不是支持。

你可以考虑这个伪标记：

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

诀窍是给兄弟姐妹提供与父母相同的大小和位置，并为兄弟姐妹而不是父母设定样式。这看起来像父母的风格！

现在，如何为兄弟姐妹设计风格？

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

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

你可以试试这个。

答案 1 :(得分：0)

嗯，当你尝试这样的事情时，你在谈论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>

脚本是您需要mouseover和mouseout的地方，否则您在悬停时添加后无法删除课程：

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'));
}
相关问题
最新问题