get：before：after擬似クラスを使用して画像上のリンクを操作する

Question

私は自分のページに複数の画像があり、ホバーで消える（黒色の四角形のように.6不透明である）ようにしたい。それは簡単な部分です。

.item { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.item img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.item:after, 
 
.item:before { 
 
    position: absolute; 
 
    opacity: 1; 
 
    transition: all 0.8s; 
 
    -webkit-transition: all 0.8s; 
 
} 
 
.item:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 
.item:before { 
 
    content: attr(data-content); 
 
    width: 100%; 
 
    color: #fff; 
 
    z-index: 1; 
 
    bottom: 1; 
 
    padding: 34px 6px; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 
.item:hover:after, 
 
.item:hover:before { 
 
    opacity: 0; 
 
}

<div class="item" data-content="Image Title"> 
 
    <a href="http://www.google.com"> 
 
    <img src="http://placehold.it/180x267"> 
 
    </a> 
 
</div> 
 

 
<div class="item" data-content="Second Image Title"> 
 
    <a href="http://www.google.com"> 
 
    <img src="http://placehold.it/180x267"> 
 
    </a> 
 
</div>

ここでオーバーレイが取り組んでFIDDLEですが、モバイルでは応答しません。

私の問題は次のとおりです。画像もリンクしたいです。これは：before：after擬似クラスと互換性がないようです。私は

{ content: ' [' attr(href) ']'; } 

しかし、運を持つと

content: '\A'; 

を交換しようとしました。画像はリンクに変わりますが、オーバーレイはもうありません。モバイルでも反応しません。どうすれば修正できますか？ FIDDLEリンクは機能していますが、オーバーレイはありません。

ホバリングで消えてリンクに変わるオーバーレイを持つ画像を作成するにはどうすればよいですか？しかし、モバイルレスポンスもありますか？おそらくいくつかのjquery？

Answer 1

擬似要素でpointer-events: none;を使用できます。応答の画像次のプロパティを追加することができますについては

：

• max-width: 100%;
• height: auto;
• display: block;

注：は常に接頭辞の前に、ベンダープレフィックスを持つプロパティを確認してください1。

.item { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
    padding: 0px; 
 
    margin-left: 20px; 
 
} 
 
.item img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 
.item:after, 
 
.item:before { 
 
    position: absolute; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.8s; 
 
    transition: all 0.8s; 
 
    pointer-events: none; 
 
} 
 
.item:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 300px; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 
.item:before { 
 
    content: attr(data-content); 
 
    width: 100%; 
 
    color: #fff; 
 
    z-index: 1; 
 
    bottom: 1; 
 
    padding: 34px; 
 
    text-align: center; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.item:hover:after, 
 
.item:hover:before { 
 
    opacity: 0; 
 
}

<div class="item" data-content="First image Title"> 
 
    <a href="http://www.google.com"> 
 
    <img src="http://placehold.it/180x267"> 
 
    </a> 
 
</div> 
 
<div class="item" data-content="Second Image Title"> 
 
    <a href="http://www.google.com"> 
 
    <img src="http://placehold.it/180x267"> 
 
    </a> 
 
</div>

---

• pointer-events property summary - ソースMDN。
• pointer-events browser support - ソースを使用することはできますか？

Answer 2

親コンテナの代わりにリンクに:beforeとの影響を与えるのはどうですか？

https://jsfiddle.net/cLcmhuzo/1/

私はそれがモバイル応答することについて一部を理解していません。何を試しましたか？どの部分が動いていないのですか？固定ピクセルサイズからパーセンテージに幅を変更するだけでうまくいくと思われます。