Изменение цвета границы при наведении

Question

Я пытался создать эффект наведения border-color с помощью CSS, и, похоже, что-то не работает должным образом.Вот мой код:

Разметка:

<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, я бы пошел на jquery.

Answer 3

вы можете использовать эту скрипку, которая меняет цвет треугольников и адаптирует его для прояснения вашего вопроса. http://jsfiddle.net/j7YSu/1/

(или просто примите это как правильный ответ:))

У меня были некоторые проблемы с вашим кодом, но, возможно, эта скрипка поможет: http://jsfiddle.net/j7YSu/3/

Answer 4

Вы должны использовать этот способ,

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