css - 画像にカーソルを合わせるとリンクが表示されます

Question

したがって、画像http://www.reversl.net/hovers/を含む div があり、ここに示されているレイアウトのようにホバーすると、画像に 2 つのリンクが表示されるようにしたいと思いますhttp://www.reversl.net /demo/ css だけでこれを実現できますか?

Answer 1

リンクとcssでdivを作成できます：

div.myimage div.links { display:none;} 
div.myimage:hover div.links { display:block;} 

サンプル HTML:

 <div class="myimage">
   <div class="links"> we are the links</div>
   <img src="animage.png" />
</div>

明らかに、自分でdivの配置を設定する必要があります

Answer 2

display：none/blockでそれを行うことができる別の方法

div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }

<div class="container">
<img src="an_img.jpg">
<div> <a href="a link">A link should be here</a> </div>
</div>

Answer 3

いつでも「不透明度」を使用できます。

マークアップは次のようになります。

<div class="wrapper">
  <img src="example.png" alt="example" />
  <ul class="links">
     <li><a href="">Example Link</a></li>
     <li><a href="">Example Link</a></li>
   </ul>
   </div>

次にCSSで：

 .wrapper {
     position: relative; /*so the absolute positioning works */
  }

 .links {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;  /*hidden by default */
     width: 100%;
     height: 25px; /*making this up */
  }

  .wrapper:hover .links, .wrapper:focus .links {
     opacity: 1;  /*visible on hover */
   }

この手法にはいくつかの注意事項があります。

• opacity CSS プロパティを理解しないため、IE8 以下ではopacity フィルタを使用する必要があります。
• あなたが意図しているように見えるので、ナビゲーションにはこの手法をお勧めしません。タッチ デバイス (スマートフォンとタブレット) のユーザーには、依存する "ホバー" 状態が実際にはありません。

ただし、最新のブラウザを使用しているユーザー向けにボーナス ポイントが必要な場合は、次のように追加します。

 .links {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

そして、リンクは「フェードイン」します - すべて CSS を使用します。

Answer 4

画像のみにカーソルを合わせたい場合：

div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }

（最後のものは、リンクにカーソルを合わせたときのちらつきをなくすために必要です）

<div class="container">
<div> <a href="">A link should be here</a> </div>
<img src="an_img.jpg">
</div>