Question

我有三个彼此相邻的产品块。每个都有一个图像和名称如下。当您将鼠标悬停在文本上时，我想要这样做，它会在图像底部显示一个边框。我有一个用于图像悬停的样式设置，当我将鼠标悬停在图像上时，它会起作用，但是当我将鼠标悬停在文本上时，它就无效。

我也有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
}

Answer 1

当文字出现在DOM中的图片之后，唯一可以做到这一点的方法是将:hover设置为文本和图片的父级li。

You can see the demo here

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

Answer 2

更改为以下样式：

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

DEMO： http://jsfiddle.net/dCNKm/5/

Answer 3

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

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

可以成为这个：

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

同时考虑重写文本。

在文本mouseover的图象边界

3 个答案: