リンクの後に消えます：CSSの後のプロパティ

Question

私は現在、ウェブサイトの読み込み時間をスピードアップしようとしています。私がこのプロジェクトを取ったときには、画像を明るくするロールオーバー画像がありました。私はあなたがCSSでこれを行うことができることを知っていました。ちょうどちょっと明るい画像を使って、同じ画像を2つ使用する必要はありませんでした。私は：afterプロパティを使用して、この考えを模倣する。 前のホームページでは、これらの「カテゴリ画像」はクリック可能でしたが、：after擬似要素を実装すると、画像の周りのリンクが消えました。ここで

が私のレイアウトの小さなスニペットはここ 4x4 Grid snippet は、ブロックの1

.new-hide-on-mobile { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.new-hide-on-mobile:hover:after { 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    background: white; 
 
    opacity: 0.2; 
 
    margin: 0 auto; 
 
}

<div class="new-hide-on-mobile"> 
 
<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"><img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"></a><br></div>

するためのコードである私は、コンテンツで起こって何かがあることを理解します：「」 ;私が探しているロールオーバーの効果はありません。私はこれについてすべて間違っているのですか？私は別のことをしなければならないでしょうか？

Answer 1

あなたはBrightness Filterを使用することができます。
IEを除くすべての主要なブラウザでサポートされています。

a:hover img { 
    -webkit-filter: brightness(1.1); 
    filter: brightness(1.1); 
} 

---

HTML

<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"> 
    <img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"> 
</a> 

CSSはここjsFiddle demoです。

Answer 2

これは、divの擬似要素がリンクをカバーしているためです。アンカーの擬似要素を使用すると、クリック可能なオーバーレイを表示できます。

.new-hide-on-mobile { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.new-hide-on-mobile a:hover:after { 
 
    content: ''; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    background: white; 
 
    opacity: 0.2; 
 
    margin: 0 auto; 
 
}

<div class="new-hide-on-mobile"> 
 
    <a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"><img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"></a> 
 
    <br> 
 
</div>