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

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.