悬停时边框颜色变化答案

【问题标题】：Border color change on hover悬停时边框颜色变化
【发布时间】：2012-03-15 16:07:10
【问题描述】：

我一直在尝试使用 CSS 创建 border-color 更改悬停效果，但似乎有些东西无法正常工作。这是我的代码：

标记：

<ul>
  <li class="hover">
    <img src="img/content/lighter.png" alt="lighter"/>
    <p>Discusing Strategy</p>
  </li>
  <li class="triangle"></li>
  <li class="hover">                  
    <img src="img/content/wrench.png" alt="wrench"/>
    <p>Beginig <br/> Designs &amp; Development</p>
  </li>
  <li class="triangle"></li>
  <li>
    <img src="img/content/car.png" alt="car"/>
    <p>Delivering Product</p>
  </li>
</ul>

CSS：

div#bpath ul li.triangle {
  width: 0;
  height: 0;
  border-top: 95px solid  #d0dde5;
  border-left: 20px solid #c1c1c1;
  border-bottom: 95px solid  #d0dde5;
}

div#bpath ul li.hover:hover li.triangle {
  border-left-color: #5f9999;
}

我在这里做错了什么？我使用相同的技术来更改p 元素的颜色并且效果很好。为什么边框颜色更改不起作用？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

如果你想改变所有的三角形 li，使用这个：

div#bpath ul:hover li.triangle{
                                border-left-color: #5f9999;
                            }

如果你只想要下一个三角形元素，那就更棘手了，但你可以试试这个：

div#bpath ul li:hover + li.triangle {
  clear:both;
}

我认为这不适用于 ie。如果你想让它在 IE 上工作，我会选择 jquery。

【讨论】：

Aldo 你提供的答案是我正在寻找的第二个选择器似乎成功了，谢谢

【解决方案2】：

您的选择器：

div#bpath ul li:hover li.triangle

正在尝试匹配li 中的“三角形”类的li 元素。由于您似乎没有嵌套列表（因此在其他 li 元素中没有 li 元素），这似乎无法工作。

如果您删除后者 li (li.triangle) 以提供（全部或其中之一）以下内容：

div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
    border-left-color: #5f9999;
}

这可能有效。假设您发布的 HTML 是正确的。

【讨论】：

唯一的问题是只有具有三角形类的李有一个边框适用于它们，我试图只修改它们的颜色，同时将鼠标悬停在另一个李上
所以使用#bpath ul:hover li.triangle 选择器。由于您没有具体说明（或者我无法说出）您想要什么，我不得不猜测很多，因此选择器的选择范围很大。 =/
我在第一个和第三个 li 中添加了一个悬停类，这样你就可以看到我想要实现的目标我已经在我的代码中这样做了，它仍然有效

【解决方案3】：

你应该这样用，

div#bpath ul li.triangle:hover {
  border-left-color: #5f9999;
}

【讨论】：

【解决方案4】：

您可以使用这个小提琴，它会改变三角形的颜色并对其进行调整以澄清您的问题。 http://jsfiddle.net/j7YSu/1/

（或者只是接受它作为正确答案:)）

我的代码有一些问题，但也许这个小提琴会有所帮助：http://jsfiddle.net/j7YSu/3/

【讨论】：

我不是试图在悬停在它上时用一类触发器来改变它的颜色我试图在悬停在另一个项目上时改变它的颜色