0

マウスオーバーで表示される画像にコンテンツを入れます。

問題は、画像を拡大するためにサムネイルをアンカーリンクでこれが機能しないことです。

<a href="http://dummyimage.com/300x120/a26/fff" class="thumbnail"> <!-- this not work! -->
    <img class="hov" src="http://dummyimage.com/300x120/a26/fff" />
</a>

これを修正する方法はありますか？

コードは次のとおりです：jsFiddle

編集

私はそうしようとしましたが、何も起こりません！

$('.contenthover').on('click', function(){ $(this).parent().find('.thumbnail').trigger('click'); });
4

1 に答える 1

0

私はその問題を解決する方法を見つけました。コードは次のとおりです。

<ul class="thumbnails">
         <li class="span3 imag">
             <a href="http://dummyimage.com/300x120/a26/fff" class="thumbnail" rel="gallery1" title="">
                <img class="hov" src="http://dummyimage.com/300x120/a26/fff" />
             </a>
           <div class="contenthover">
                   <div class="btn-group pos">
                    <a class="btn tip dropdown-toggle mybutton" data-toggle="dropdown tooltip" title="Modifica" href="#">
                        <i class="icon-pencil"></i>
                    </a>
                    <ul class="dropdown-menu pull-right" style="margin:0;" aria-labelledby="dLabel" role="menu">
                        <li><a tabindex="-1" class="various" href="#inline"><i class="icon-wrench"></i>Modifica</a></li>
                        <li><a tabindex="-1" data-toggle="modal" href="#modalDesc"><i class="icon-edit"></i>Modifica descrizione</a></li>
                        <li><a tabindex="-1" data-toggle="modal" href="#modalPred"><i class="icon-star"></i>Imposta come predefinito</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" data-toggle="modal" href="#modalDel"><i class="icon-trash"></i>Elimina immagine</a></li>
                    </ul>
               </div>
               <div class="conhov">
                        <p>Nessuna descrizione</p>
               </div>
           </div>
         </li>
   </ul>

css：

.contenthover { 
   display: none;
   width: 100%;
    height: 100%;
 }
.contenthover, contenthover a { color:#fff; }
.contenthover p { margin:0 0 10px 0; line-height:1.4em; padding: 5px; }
.contenthover a.mybutton { 
    padding:4px 8px;
}
.imag {
   position:relative;
   margin-left: 15px !important;
}
.conhov {
   background: rgba(51, 51, 51, 0.63);
   text-overflow: ellipsis;
   text-shadow: 0 0 3px rgba(0, 0, 0, .75);
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
}
.pos {
    position: absolute;
   top: 2%;
   right: 2%;
}

個々のオブジェクトの絶対位置を使用しました。このようにして、親指の残りの部分はクリック可能なアンカーになります。

于 2013-03-16T20:30:50.593 に答える