Javascript 文本鼠标悬停上的图像边框

我有三个相邻的产品块。下面每个都有一个图像和一个名称。当你将鼠标悬停在文本上时，我想做的是在图像底部显示一个边框。我为“图像悬停”设置了一个样式集，当我将鼠标悬停在图像上时，它可以工作，但当我将鼠标悬停在文本上时，它不能工作

还有我的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 -->​

---

更改为以下样式：

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

---

演示：

更改为以下样式：

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

---

演示：

您不应该在特定元素上应用带有属性的悬停样式，而应该在父元素上应用。因此：

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

可能会变成这样：

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

---

也考虑重写该文本。

你应该将悬停样式应用在特定元素上，而不是在父元素上。因此：

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

可能会变成这样：

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

---

也可以考虑为文本重写。

当文本出现在DOM中的图像之后，唯一能做到这一点的方法是将<代码>：悬停设置为文本和图像的父级，<代码> LI>代码> < /P>

---

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

，因为文本位于DOM中图像的后面，唯一的方法是将

：hover

设置为文本和图像的父级，即

li

---

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

我讨厌我在与其他人同时发布同样的内容：）@povilasp这是我首先想到的另一个显而易见的答案。但没有人在同样的答案上投票超过我，圣诞节毁了：D@povilasp圣诞快乐：）我讨厌我和别人在同一时间发布同样的东西：）@povilasp这是我第一次想到的另一个显而易见的答案。但是没有人投票给我同样的答案，圣诞节毁了：D@povilasp圣诞快乐：）非常感谢你，我不知道你能做到。谢谢你，我不知道你能做到。