web-dev-qa-db-ja.com

ホバー時にのみボタンを表示

私は自分の問題を読んで他の解決策を試しましたが、どれもうまくいかないようです。

3つの画像があり、それぞれ4列のdiv内にあります。ユーザーのマウスが画像の上を移動したときにこれらの画像がグレースケールからカラーにフェードするように、CSSトランジションを設定しています。ホバーにボタンを表示する必要があります。意味を説明するために画像を添付しました。

enter image description here

そして、中央の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ルールです。

htmlcsssass
12
E.Owen

どうぞ：

.button {
    display: none;
}

img:hover + .button, .button:hover {
    display: inline-block;
}

これにより、隣接する兄弟CSSセレクター+。セレクターは非常に簡単です。画像「ホバリング」で、.button（その兄弟）と表示します。ここでは、.button:hoverユーザーがボタンを「ホバー」すると、ボタンが表示されたままになります（ユーザーがボタンの上にマウスを移動したときの点滅効果を防ぎます）。

15
H4ris

単純な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>
8
DBS

クラスを画像コンテナに設定し、画像コンテナにカーソルを合わせるとボタンを表示できます。

これを確認してください link 実際の例：

.img-container:hover .button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
2
ArMikael

ここで私の友人に行きます

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

1
Feelsbadman