子の髪の毛の上に乗ったとき親の髪の毛の背景を変更する

Question

親の犬の背景画像を変更しようとしていますが、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> 

"list"クラスには背景イメージがあります。ユーザーがリールを上に移動すると、「リスト」の背景イメージを変更しようとしています。これは私が試したものです： -

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

これは動作しません。さらに、関連するカテゴリに従って背景画像が変化するはずである。例えば、私がオートメーションliにカーソルを合わせると、適切なイメージが背景としてロードされます。これは、 "リスト" クラスを破壊し、それに対して "ヌル" クラスを追加している

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

JS

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にとって全く新しいです。私はこれを学ぶのが大変です。どんな助けもありがとうございます。

Answer 1

通常、純粋なCSSでは実行できません。しかし、カスケーディングの方向にスタイリングをサポートしています。

あなたは、この疑似マークアップを考えることができます。

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

トリックは兄弟に親と同じ大きさと位置を与えるために、代わりに親の兄弟のスタイルをすることです。これは、親がスタイルされているように見えます！

今、兄弟のスタイルを設定する方法は？

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

このトリックの例にこのfiddle

に質問結果にあなたはこれを試すことができます。

Answer 2

これは、.list ul li a:hover .list {background-image: url('some.jpg');のようなものを試してみると、parentセレクタの話です。これはCSSだけでは不可能です。

JavaScriptを使用する別のオプションがあります。問題のあなたのスクリプトで試したことは、これを完了した解決策ではありません。それはあなたのための作業であれば、私はあなたのマークアップを使用して独自の方法を試してみましたが、下記を参照してください：あなたはmouseoverとmouseoutの両方を必要な場所

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