Bootstrap缩略图内容悬停

我将内容放入鼠标悬停上显示的图像中。Bootstrap缩略图内容悬停

问题是，这不起作用的锚链接缩略图放大图像。

<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'); });

来源

2013-03-11 Lughino

我看到它在Chrome中工作。为了澄清，你所说的内容是在“半透明灰色层”上叠加的“描述”字样？ – Raptor 2013-03-11 04:04:31

不，问题在于锚点不起作用，因为缩略图将div“contenthover”悬停在图像上方。我也试过用铬和不起作用。 – Lughino 2013-03-11 13:36:30

这里适用于Chrome 24 ...没有问题。 – 2013-03-11 14:53:09

我找到了解决问题的方法。下面的代码：

<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-16 20:30:50 Lughino

Bootstrap缩略图内容悬停

回答

相关问题