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 回答