0

これがコードです-divとその中の画像-ホバーすると、テキストを含む別のdivが表示されます。問題は、この div (imgWrap) または (imgDescription) にテキストでリンクを作成する方法です。div全体をリンクにしたいのですが、私の努力はすべて何も終わりませんでした。ありがとう

リンクhttp://jsfiddle.net/6Dupu/

<style>
                .wr{
                    border:1px solid #ccc;
                    margin:10px;
                    float:left;
                }
                .imgWrap {
                  position: relative;
                  height: 175px;
                  width: 250px;


                }
                .imgWrap img{
                    height: 175px;
                    width: 250px;

                }
                .imgDescription {
                  position: absolute;
                  padding:20px;
                  overflow:hidden;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  height:100%;
                  line-height:14px;
                  background: rgba(29, 106, 154, 0.8);
                  color: #fff;
                  visibility: hidden;
                  opacity: 0;
                   -webkit-transition: opacity 500ms;
                   -moz-transition: opacity 500ms;
                   -o-transition: opacity 500ms;
                   transition: opacity 500ms;
                }


                .imgWrap:hover .imgDescription {
                  visibility: visible;
                  opacity: 1;
                }
            </style>
<div class="wr">
 <div class="imgWrap">
   <img src="somepic">
   <p class="imgDescription">
        <a href="" style="color:white;"><b>item_name</b></a> 
        <small style="display:block;padding:10px 0px;">item_text</small>
        <small>item_date</small>
  </p>

 </div>
</div>
4

3 に答える 3

3

最初の div にカーソルを合わせたときにテキスト付きの div を表示する代わりに、アンカーを使用してブロックとして使用します。（表示ブロック）

于 2013-11-14T08:08:24.290 に答える
1 
    <a href=""><div class="wr">
<div class="imgWrap">
    <img src="somepic"/>

  <p class="imgDescription">
         style="color:white;"><b>item_name</b>
            <small style="display:block;padding:10px 0px;">item_text</small>
            <small>item_date</small>

  </p>

</div>
</div>
</a>

そして、あなたのスタイルセットで .imgDescription{marging:0px} - Firefoxでは、「p」にマージンがあることがわかります

于 2013-11-14T08:16:24.697 に答える
1

フィドルをチェックしてください

divクリック時にリンクを追加する必要があります

于 2013-11-14T08:11:38.917 に答える