'ホバー' 効果

Question

のためのマークアップを作成します。私はこのようになりますビデオのコンテナがあります。 screenshot1

HTML：

<div class="video-item col-xs-6 col-md-4"> 
     <div class="opacity-layer"></div> 
     <div class="play-block"> 
      <div class="landing-play-button"></div> 
     </div> 
     <img src="image.jpg"> 
    </div> 

CSS：

.opacity-layer{ 
    position: absolute; 
    background-color: white; 
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
} 

.play-block{ 
    position: absolute; 
    width: 90%; 
    height: 55%; 
    border: solid white 4px; 
    margin: 5% 5%; 
    opacity: 0.5; 
    /*background-color: #f5f5f5;*/ 
    cursor: pointer; 
} 

.play-block:hover{ 
    background-color: transparent; 
} 

と私を "ホバー" 上を'play-block'内でのみ 'opacity-layer'を削除したい場合は、screenshot2のようにします。

Answer 1

その後、hoverにB ackground-colorをフェードアウト、複数bordersまたはoutlineを使用してみてください。私は、この例でoutlineを使用 - https://jsfiddle.net/ea90qjae/

それが今では、完成ソリューションを意味していますが、それは「不透明層は、」全体」のビデオ・アイテムのdiv要素をカバーすると仮定すると10

Answer 2

用途：

.video-item:hover .opacity-layer { 
    opacity: 0; 
} 

意志の問題を解決する：あなたは不透明層が:hoverに見えないようにしたい場合は

.play-block:hover { 
    background-color: transparent; 
    opacity:1; 
} 

Answer 3

が、私は最も簡単な方法をお勧めしたいですか？

編集：以下CSSで

<div class="video-item col-xs-6 col-md-4"> 
    <div class="play-block"> 
     <div class="covers-only-play-block"> 
      <div class="landing-play-button"></div> 
     </div> 
    </div> 
    <img src="image.jpg"> 
</div> 

： はここにアイデアだ

.covers-only-play-block { 
    position: relative; 
    z-index: 1; /* 1 is a placeholder, it needs to be lower than the one for the play button, though */ 
    background: #fff; 
    opacity: .5; 
} 
.video-item:hover .covers-only-play-block { 
    opacity: 0; 
}