背景画像上のテキストはホバー状態を削除します

Question

私はこのテキストを画像の上に置きます。テキストにカーソルを合わせると、背景画像用に作成したホバーは機能しません。誰にもこれに対する解決策がありますか？

JSfiddle： https://jsfiddle.net/marineboudeau/h177pdne/4/

<div class="card"> 
    <a href="#"> 
    <div class="background-container"> 
     <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div> 
    </div> 
    </a> 
    <a href="#" class="headline link--no-decor"> 
    <h2>Headline</h2> 
    </a> 
</div> 

とCSS：

.card { 
    width: 300px; 
    height: 200px; 
} 

a { 
    text-decoration: none; 
} 

h2 { 
    color: white; 
    font-family: Helvetica, sans-serif; 
} 

h2:hover { 
    color: yellow; 
} 

.headline { 
    padding: 0 22px; 
    position: relative; 
    margin-top: -80px; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
} 

.background-container { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: relative; 
} 

.background-container:after { 
    content: "gradient mask for image"; 
    overflow: hidden; 
    position: absolute; 
    text-indent: -9999rem; 
    font-size: 0; 
    line-height: 0; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0)); 
} 

.background-container:hover:after { 
    background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6)); 
    border: 2px solid red; 
} 

.background { 
    height: 200px; 
} 

ありがとう！

Answer 1

<a href="#" class="headline link--no-decor">をbackround要素に移動すると、hoverイベントはブロックされません。ブロックからa.headlineホバーを.background-container:afterを防止するために

、我々はa.headlineにposition: relative、およびz-index: 1を割り当てる必要があります。

.card { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
h2 { 
 
    color: white; 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
h2:hover { 
 
    color: yellow; 
 
} 
 

 
.headline { 
 
    position: relative; 
 
    z-index: 1; 
 
    padding: 0 22px; 
 
    position: relative; 
 
    margin-top: -80px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 

 
.background-container { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.background-container:after { 
 
    content: "gradient mask for image"; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    text-indent: -9999rem; 
 
    font-size: 0; 
 
    line-height: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: linear-gradient(20deg ,rgba(0,0,0,.8), rgba(0,0,0,0)); 
 
} 
 

 
.background-container:hover:after { 
 
    background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6)); 
 
    border: 2px solid red; 
 
} 
 

 
.background { 
 
    height: 200px; 
 
}

<div class="card"> 
 
    <a href="#"> 
 
    <div class="background-container"> 
 
     <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div> 
 
     <a href="#" class="headline link--no-decor"> 
 
     <h2>Headline</h2> 
 
     </a> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

.background-container:hover:afterこの.card:hoverセレクターでホバーを追加し、これは動作するはずです。この.card:hover a .background-container:after

のような背景cointainerを選択し、

.card:hover a .background-container:after { 
     background: linear-gradient(20deg,rgba(255, 0, 0,.6),rgba(255, 255, 0,.6)); 
     border: 2px solid red; 
} 

チェックにホバーを設定するIstead完全なコードを

.card { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
h2 { 
 
    color: white; 
 
    font-family: Helvetica, sans-serif; 
 
} 
 
h2:hover { 
 
    color: yellow; 
 
} 
 
.headline { 
 
    padding: 0 22px; 
 
    position: relative; 
 
    margin-top: -80px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
.background-container { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: relative; 
 
} 
 
.background-container:after { 
 
    content: "gradient mask for image"; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    text-indent: -9999rem; 
 
    font-size: 0; 
 
    line-height: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: linear-gradient(20deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); 
 
} 
 
.card:hover a .background-container:after { 
 
    background: linear-gradient(20deg, rgba(255, 0, 0, .6), rgba(255, 255, 0, .6)); 
 
    border: 2px solid red; 
 
} 
 
.background { 
 
    height: 200px; 
 
}

<div class="card"> 
 
    <a href="#"> 
 
    <div class="background-container"> 
 
     <div class="background" style="background: url('https://unsplash.it/300/200/?random') no-repeat; background-size: cover; background-position: center;"></div> 
 
    </div> 
 
    </a> 
 
    <a href="#" class="headline link--no-decor"> 
 
    <h2>Headline</h2> 
 
    </a> 
 
</div>