81

画像の上にカーソルを置いたときに説明を表示しようとしています。ここでは、画像スプライトとホバーを使用して、望ましくない方法で既にそれを行っています。画像の代わりに実際のテキストを使用して、私が持っている方法とまったく同じように見せたいです。

私はいくつかの異なることを試しましたが、それを行う方法を理解できないようです。HTML と CSS のみを使用してそれを実行しようとしていますが、それが可能かどうかはわかりません。

私のコードを自由にいじってみてください。関連性があると思われるものをここに貼り付けます。

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}
<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>

4

8 に答える 8

132

それは簡単です。画像と「ホバー時に表示」の説明を、画像と同じサイズの div で囲みます。次に、いくつかの CSS を使用して、その div をホバリングしているときに説明が表示されるようにします。

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

いいフィドル: https://jsfiddle.net/govdqd8y/

編集：

<img>ラッピングの高さを明示的に設定したくない場合は、別のオプションがあります。<div>それは単に<div>の表示をインライン ブロックに設定することです。(ただし、画像の読み込みに失敗すると見栄えがよくないことに注意してください。)

このオプションを選択する<img>と、ラッピングの下部との間にわずかな間隔ができます<div>。これは、<img>のデフォルトvertical-align値が であるためですbaseline。設定するbottomと消えます。

このオプションを使用したフィドルは次のとおりです: https://jsfiddle.net/joplomacedo/5cL31o0g/

于 2013-01-10T17:33:29.513 に答える
111

HTML で、表示したいテキストをコードのタイトル部分に入れてみてください。

<a  href="buzz.html" title="buzz hover text">

画像の代替テキストについても同じことができます。

于 2013-01-10T17:23:40.580 に答える
19

イメージタグで title 属性を使用することもできます

<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
于 2017-04-19T09:39:03.447 に答える