Border color change on hover

问题:

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?

回答1:

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.

回答2:

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.

回答3:

you should use this way,

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

回答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/