快速查看代码或脚本

Question

目标

当有人在包含的链接上悬停时，我想显示一个覆盖图像的文本栏，垂直居中并与左右边缘硬对齐。我不确定最简单和最好的方法是什么。

这是我试图实现的效果：

代码

以下是我正在使用的HTML：

<ul class="products">
    <li>
        <a href="#"><img src="images/product-image.jpg" class="photo" /></a>

        <div class="text_holder">
            <h3>Product name</h3>  
            <p class="description">Short description below product name</p>
            <p class="price">$29.99<em>Was: $59.99</em></p>
        </div>
    </li>
</ul>

我已经尝试了

我对纯CSS和jQuery解决方案都持开放态度。我已经尝试了几个工具提示脚本，但它们都没有运行得很好：有些不允许将工具提示用作链接，而其他工具提示在产品图像区域中不可见。我也尝试过类似的方法来解决Ryan Silva的建议，但没有运气。

Answer 1

试试这个 FIDDLE

<强> HTML

<ul class="products">
<li>
        <div class="outer"><img src="http://fc00.deviantart.net/fs70/i/2012/282/c/7/emma_watson_portrait_by_prod44-d5hcxul.jpg" class="photo" />
        <div class="quick">
            <p>Quick View</p>
         </div>
        </div>

        <div class="text_holder">
            <h3>Product name</h3>  
            <p class="description">Short description below product name</p>
            <p class="price">$29.99<em>Was: $59.99</em></p>
        </div>
    </li>
    </ul>

<强> CSS

     li{
   list-style:none; 
    text-align:center;    
}img{
    width:100%;
    padding:5%;
     border: 1px solid rgba(255,255,255,0);
}

.outer{ 
    position: relative;
    width:300px;

}
.quick{
    position: absolute;
    left:0;
    right:0;    
    margin-top:-75%;
    padding:0 5%;
    width:100%;
    background:red;
    display:none;
}

.outer:hover img{
 border: 1px solid red;
}
.outer:hover .quick{
     display:block;
} 

Answer 2

执行此操作的一种方法是设置一个CSS规则，当您将鼠标悬停在链接上时，该规则会将悬停图像添加到链接的before伪元素中。如果您创建了链接position: relative，则可以添加与其背后图像尺寸相同的伪元素，并position:absolute使其浮动在顶部。