オブジェクトをホバリングしたときに別の要素にCSSクラスを適用するにはどうすればよいですか？

Question

私は、ユーザーが製品上にマウスを置く必要があるプロジェクトを持っています。そして、他の製品は、それらを白黒にフィルターするクラスを持ちます。私はフィルタを置く方法を知っているが、私が必要とするのは、製品上をホバーすると白黒にならず、他の製品はフィルタリングされるということだ。私は何をすべきか？

img.grayscale:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: #666666; 
    -webkit-filter: grayscale(100%); 
} 

img.grayscale { 
    filter: none; 
    -webkit-filter: grayscale(0%); 
} 

ホープ誰かが私を助けることができます。

<div id="wrapper"> 
<ul> 
    <li> 
    <div><a href="#"><img class="grayscale" src="images/product1.png"/></a></div> 
    <div><span class="product_text">sample product 1</span></div> 
    </li> 

    <li> 
    <div><a href="#"><img class="grayscale" src="images/product2.png"/></a></div> 
    <div><span class="product_text">sample product 2</span></div> 
    </li> 

    <li> 
    <div><a href="#"><img class="grayscale" src="images/product3.png"/></a></div> 
    <div><span class="product_text">sample product 3</span></div> 
    </li> 
<ul> 
</div> 

はここでクラスのグレースケールおよびフィルタなしのための私のCSSコードです：

は、ここに私のhtmlコードです。ありがとう！ :)

Answer 1

あなたはイメージの上にホバーで行うことはできません。

何が行うことができますすることは、メニューを置くとすべて画像をグレースケールにするとホバー画像からグレースケールを削除しています。

#wrapper ul:hover img { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
} 
 
#wrapper ul img:hover { 
 
    -webkit-filter: none; 
 
    filter: none; 
 
    -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
} 
 
#wrapper ul { 
 
    list-style: none; 
 
} 
 
#wrapper ul li { 
 
    display: inline-block; 
 
}

<div id="wrapper"> 
 
    <ul> 
 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <img class="grayscale" src="http://www.fillmurray.com/140/100" /> 
 
     </a> 
 
     </div> 
 
     <div><span class="product_text">sample product 1</span> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <img class="grayscale" src="http://www.fillmurray.com/140/100" /> 
 
     </a> 
 
     </div> 
 
     <div><span class="product_text">sample product 2</span> 
 
     </div> 
 
    </li> 
 

 
    <li> 
 
     <div> 
 
     <a href="#"> 
 
      <img class="grayscale" src="http://www.fillmurray.com/140/100" /> 
 
     </a> 
 
     </div> 
 
     <div><span class="product_text">sample product 3</span> 
 
     </div> 
 
    </li> 
 
    <ul> 
 
</div>