Question

我一直在尝试使用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元素的颜色，这是有效的。为什么边框颜色变化不起作用？

Answer 1

你的选择器：

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是正确的。

Answer 2

如果您想要更改所有三角形li，请使用此：

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

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

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

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

Answer 3

你应该这样使用，

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

Answer 4

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

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

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

悬停时边框颜色发生变化

4 个答案: