悬停时边框颜色发生变化

Question

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:

Markup:

<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;
}

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?

Answer 1

Your selector:

div#bpath ul li:hover li.triangle

is trying to match a li element of class 'triangle' within an li . As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.

If you remove the latter li ( li.triangle ) to give (all, or one, of) the following:

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;
}

this might work. Assuming your posted-HTML is correct.

Answer 2

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;
}

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

Answer 3

you should use this way,

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

Answer 4

you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/

(or just accept it as the right answer :))

i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/