ホバー上での色の変化

Question

私はCSSでborder-color変更ホバー効果を作成しようとしていましたが、何かが正しく動作していないようです。ここに私のコードは次のとおりです。

マークアップ：

<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:hover li.triangle{ 
           border-left-color: #5f9999; 
          } 

あなただけの次の三角形要素をしたい場合、それはよりトリッキーですが、あなたはこれを試すことができます。

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

私はこのことを考えますつまり、動作しません。 IE上で動作させたい場合は、jqueryに行きます。

Answer 2

あなたの選択：

div#bpath ul li:hover li.triangle 

はli内のクラスの三角形 "のli要素と一致しようとしています。ネストされたリストは表示されないため（他のli要素内にはli要素が含まれていません）、これは機能しないようです。あなたは後者li（li.triangle）は、以下の（、のすべて、または1）を得削除する場合

：

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 3

あなたは

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

Answer 4

あなたが三角形の色を変更し、このバイオリンを使用して、あなたの質問を明確にするためにそれを適応させることができ、この方法を使用する必要があります。 http://jsfiddle.net/j7YSu/1/

（またはちょうど答え:)としてそれを受け入れる）

私はあなたのコードでいくつかの問題があったが、多分これフィドルは役立ちます：http://jsfiddle.net/j7YSu/3/