私は自分の問題を読んで他の解決策を試しましたが、どれもうまくいかないようです。
3つの画像があり、それぞれ4列のdiv内にあります。ユーザーのマウスが画像の上を移動したときにこれらの画像がグレースケールからカラーにフェードするように、CSSトランジションを設定しています。ホバーにボタンを表示する必要があります。意味を説明するために画像を添付しました。
そして、中央の4列のHTMLとCSSのスニペットです。
---------------------[〜#〜] html [〜#〜] ---------------------
<div class="small-4 columns">
<img src="/wp-content/themes/adamslaw/assets/img/woman.png">
<a class="button" href="/jane/">View Jane's Profile</a>
</div>
---------------------[〜#〜] css [〜#〜] ---------------------
.greyish {
background: $smoke !important;
h1 {
margin: rem-calc(100) 0 0;
}
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0%);
.button:hover {
display: inline-block;
}
}
}
注:私はSCSSを使用しています。したがって、奇妙に見えるネストされたCSSルールです。
どうぞ:
.button {
display: none;
}
img:hover + .button, .button:hover {
display: inline-block;
}
これにより、隣接する兄弟CSSセレクター+
。セレクターは非常に簡単です。画像「ホバリング」で、.button
(その兄弟)と表示します。ここでは、.button:hover
ユーザーがボタンを「ホバー」すると、ボタンが表示されたままになります(ユーザーがボタンの上にマウスを移動したときの点滅効果を防ぎます)。
単純なimg:hover + .button
を使用してリンクを選択できます(+
は、.button
セレクターと一致する場合、次の要素を選択します)
.button {
display: none;
}
img:hover + .button {
display: inline-block;
}
<div class="small-4 columns">
<img src="http://placehold.it/350x150">
<a class="button" href="/jane/">View Jane's Profile</a>
</div>
または、ボタンが画像上にない場合は、ラッパー要素で:hover
を使用できます。これにより、ボタンをクリックするときに画像がホバーしない問題を回避できます(試してみるとボタンが消えます)上記の例のように、クリックします)
.button {
display: none;
}
.wrapper:hover img {
/* Change the filter in here */
}
.wrapper:hover .button {
display: inline-block;
}
<div class="small-4 columns">
<div class="wrapper">
<img src="http://placehold.it/350x150">
<a class="button" href="/jane/">View Jane's Profile</a>
</div>
</div>
クラスを画像コンテナに設定し、画像コンテナにカーソルを合わせるとボタンを表示できます。
これを確認してください link 実際の例:
.img-container:hover .button {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
text-align: center;
}
ここで私の友人に行きます
div.small-4.columns img ~ a {display:none;}
div.small-4.columns img:hover ~ a {display:block;}
更新:
ボタンをクリック可能かつ非表示ではないにする場合は、画像から移動を削除するまで、代わりに次を使用します。
a.button {display: none;}
div.small-4.columns:hover > a.button {display:block;}
説明:
a.button
は、クラス.button
でa
を選択することですdiv.small-4.columns:hover
両方のクラスを持つdiv
を選択する.small-4
と.columns
(画像の親)
>
はchildを意味し、~
は兄弟を意味します。この場合div.small-4.columns:hover > a.button {display:block;}
は子要素を表示するように指示していますa.button
、ホバーするとdiv.small-4.columns