하위 리버스 위로 이동할 때 부모 div 배경을 변경하십시오.

Question

일부 ul li이있는 상위 div의 배경 이미지를 변경하려고합니다. 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> 

"list"클래스에는 배경 이미지가 있습니다. 사용자가 그림을 가리키면 "목록"의 배경 이미지를 변경하려고합니다. 그리고 내가 시도한이 : -

.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> 

이 "목록"클래스를 파괴하고 그것에 "널 (null)"클래스를 추가한다. 어떤 아이디어가 잘못 되었나요? 저는 JS에 완전히 익숙하지 않아 이것을 배우기 위해 열심히 노력하고 있습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

일반적으로 순수 CSS에서는 수행 할 수 없습니다. 그러나 계단식 방향으로 스타일링을 지원합니다.

당신이 의사 마크 업을 고려할 수 :

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

비결은 형제에게 부모와 같은 크기와 위치를 제공하는 대신 부모의 형제 자매의 스타일을하는 것입니다. 부모가 스타일이 지정된 것처럼 보일 것입니다!

자, 형제를 어떻게 스타일링하나요?

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

당신이 시도 할 수 있습니다이 fiddle

의 질문 결과의 예에서이 트릭.

Answer 2

글쎄, 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')); 
}