1

我有三个彼此相邻的产品块。每个都有一个图像和下面的名称。当您将鼠标悬停在文本上时，我想要做什么，它会在图像底部显示一个边框。我为图像悬停设置了样式，当我将鼠标悬停在图像上时它可以工作，但当我将鼠标悬停在文本上时它不起作用。

这是一个 jsfiddle。

还有我的HTML：

<div class="container-product-row">
    <ul class="variations">
        <li>
            <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Cuff</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Dome</h2></a>
        </li>
        <li>
             <a href="#"><img src="../images/designs/houses.jpg" alt="" width="180" height="130" /><h2>Gladiator</h2></a>
        </li>
    </ul>  
</div> <!-- container product row -->​

CSS：

.container-product-row {
   margin-bottom:-20px;
}

.variations li {
    margin:10px; 
    width:183px
}

.variations li a, a:visited {
    display: block; 
    color:#000000; 
    text-decoration:none
}

.variations li a:hover { 
    color:#ff4baa;
}

.variations li a img {
    display: block; 
}

.variations li a img:hover {
    border-bottom:5px solid #ff4baa;
}

.variations {
    display: block;  
}

.variations > li {
    display: inline-block;
    vertical-align: top;
}

h2 {
    font-family: 'Arapey', serif; 
    font-weight:400; 
    font-size:12pt; 
    padding: 5px 10px 5px 5px;     
    font-style:italic; 
    font-weight:400
}
4

3 回答 3

4

由于文本在 DOM 中的图像之后，因此您可以做到这一点的唯一方法是将 设置为:hover文本和图像的父级，li.

你可以在这里看到演示

或者，您可以重新排列 HTML，然后使用同级选择器

于 2012-12-19T11:27:43.487 回答
2

更改为以下样式：

.variations li:hover a img {
    border-bottom: 5px solid #ff4baa;
}

演示：http: //jsfiddle.net/dCNKm/5/

于 2012-12-19T11:27:16.647 回答
2

您不应该在特定元素上应用悬停样式，而是在父元素上应用悬停样式。所以这：

.variations li a img:hover { border-bottom:5px solid #ff4baa; }

可以变成这样：

.variations li:hover a img { border-bottom:5px solid #ff4baa; }

也考虑为文本重写它。

于 2012-12-19T11:27:27.083 回答