画像の上にマウスを移動し、別の画像は

Question

こんにちは、私は画像の上にカーソルを移動したいし、別の画像/テキストが不透明になってきた背景画像が表示され、いくつかのCSS/HTML

で助けを必要と表示されます：0.5

<style> 
     .your-img { 
      width: 344px; /* your image width and height here */ 
      height: 857px; 
      background-image: url('images/men.png');   
     }   
     .your-hover { 
      width: 341px; 
      height: 225px; 
      opacity: 0; 
      filter: alpha(opacity = 0); 
      background-image: url('images/men2.png'); 
     align:bottom; 

     } 
     .your-hover:hover {   
      opacity: 0.5; 
      filter: alpha(opacity = 50); 
    } 
     </style> 


<div class="your-img"> 
    <div class="your-hover"></div> 
</div> 

を

これは私が使用しているコードです。 men.pngはメイン画像で、men2.pngはmen.pngにカーソルを合わせると表示される画像です。

が、私はその不透明度をmen.png上にカーソルを移動1であるとホバー画像は、私が正しく質問を理解している場合、私は、背景画像0.5とホバー画像1

Answer 1

を作るのですかどのように0.5

ですあなたは内側の部分を表示するために外側のdivにホバリングしたいですか？

あなただけの外側のCSSルールを追加する必要があります。ホバー>インナー

.your-img:hover > .your-hover {   
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
} 

Example

Answer 2

こんにちはあなたのコードに多くを簡素化するが、ちょうどこのCSSを持つことができます。別のホバーのdivを作成する必要はありません。擬似クラスを適用する場合：.your-imgクラスにカーソルを移動するだけで、そこにある不透明度と新しいURLが他の背景画像に設定されます。ここで

.your-img { 
     width: 344px; /* your image width and height here */ 
     height: 857px; 
     background-image: url('http://placehold.it/350x150');   
    } 


    .your-img:hover { 
     width: 341px; 
     height: 225px; 
     background-image: url('http://placehold.it/350x150'); 
     opacity: 0.5; 

は、私の知る限りではhttps://jsfiddle.net/gward90/25bcmmhb/

Answer 3

を説明するためのフィドルで、CSSだけで、背景画像の不透明度を下げるための唯一の方法はありません。また、子供が親のスタイリングに影響を与えることができないので、ホバーは親にいる必要があります。

親の不透明度を下げると、不透明度が低くなります。これを回避するには、:afterなど何かやっbackground: rgba()を適用して再生することができます：

JS Fiddle

.your-img { 
    width: 344px; 
    /* your image width and height here */ 
    height: 857px; 
    background-image: url('images/men.png'); 
    position: relative; 
} 

.your-img:after { 
    content: ''; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    display: inline-block; 
    background: rgba(0, 0, 0, 0); 
    position: absolute; 
} 

.your-hover { 
    width: 341px; 
    height: 225px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    background-image: url('images/men2.png'); 
    align: bottom; 
    display: none; 
} 

.your-img:hover::after { 
    background: rgba(0, 0, 0, .5); 
} 

.your-img:hover .your-hover { 
    display: block; 
    opacity: 1; 
    filter: alpha(opacity=50); 
} 

Answer 4

あなたのコードをホバーがある場合は特に、かなりの数のエラーがあります。あなたは親にホバーを持っている必要があります。また、あなたのコードでは、親が0.5の不透明度に、子が1になるようにしようとしています。これは不可能で、親は親の内部にあり、親が存在するので既に0.5の不透明度になります。

私はあなたのために2つのスクリプトを残しましたが、最初はあなたの修正版ですが、ホバーを働かせるべきですが、上記のように不透明度に問題があります。 2番目は修正されたhtmlとスタイルで、レイアウトの方法の例を示しています。

Example

.your-img { 
     width: 344px; /* your image width and height here */ 
     height: 857px; 
     background-image: url('images/men.png');   
    } 
     .your-img:hover .your-hover{ 
      opacity: 0.5; 
      filter: alpha(opacity = 50); 
     }  
     .your-hover { 
      width: 341px; 
      height: 225px; 
      opacity: 0; 
      filter: alpha(opacity = 0); 
      background-image: url('images/men2.png'); 
      align:bottom; 
     } 
</style> 


<div class="your-img"> 
    <div class="your-hover"></div> 
</div> 


<style> 
     .parent { 
      width: 344px; /* your image width and height here */ 
      height: 857px; 
      position: relative; 
      background-image: url('images/men.png');   
     } 
     .parent:hover .img-1{ 
      opacity: 0.5; 
      filter: alpha(opacity = 50); 
     } 
     .parent:hover .img-2{ 
      opacity: 0.5; 
      filter: alpha(opacity = 50); 
     } 
     .img-1 { 
      background-image: url('images/men.png'); 
      position: absolute; 
      height: 100%; 
      width: 100%; 
     } 
     .img-2 { 
      background-image: url('images/men2.png'); 
      position: absolute; 
      opacity: 0; 
      filter: alpha(opacity = 0); 
      width: 341px; 
      height: 225px; 
      bottom: 0; 
     } 
</style> 
<div class="parent"> 
    <div class="img-1"></div> 
    <div class="img-2"></div> 
</div>