일부 ul li이있는 상위 div의 배경 이미지를 변경하려고합니다. HTML 코드는 다음과 같습니다. -하위 리버스 위로 이동할 때 부모 div 배경을 변경하십시오.
<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에 완전히 익숙하지 않아 이것을 배우기 위해 열심히 노력하고 있습니다. 어떤 도움을 주셔서 감사합니다.
예를 들어, 내가 자동화 li 위에 마우스를 올리면 적절한 이미지가 배경으로로드됩니다. 해당 이미지는 어디에 있습니까? – brk
**이 구문을 사용하면 ** css **이 작동하지 않습니다 ** a : hover .list ** will ** 클래스가있는 ** a ** 태그에서 자손 검색 ** list ** not parent –
@brk CSS에서 지정할 수 있습니다. 나는 단지 설명하려고하고 있었다. – user3518263