悬停时边框颜色更改 [英] Border color change on hover

问题描述

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

I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:

标记：

<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 元素的颜色，并且工作。

What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?

推荐答案

如果您希望更改所有三角形li，请使用：

If you want all triangle li's to be changed use this:

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

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

If you want just the next triangle element it's more tricky but you can try this:

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

我认为这不适用于ie。如果你想要在IE上工作，我会去jquery。

I think this doesn't work on ie. If you want it to work on IE i would go for jquery.

这篇关于悬停时边框颜色更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！