懸停時的邊框顏色變化

我一直在嘗試用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元素的顏色並且工作。爲什麼不能進行邊框顏色轉換工作？

來源

2012-02-25 user1146440

如果你希望所有的三角形裏的改變使用這樣的：

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

如果你只想要下一個三角形元素它更棘手，但你可以試試這個：

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

我覺得這在ie上不起作用。如果你想讓它在IE上工作，我會去jquery。

來源

2012-02-25 12:01:10 jribeiro

阿爾您所提供的答案wasent的一個我尋找第二個選擇器似乎已經做了招數謝謝 – user1146440 2012-02-25 12:24:05

你選擇：

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是正確的。

來源

2012-02-25 12:01:14

唯一的問題是，只有李的一類三角形有一個邊框適用於他們，我試圖修改只有他們的顏色，而徘徊在其他李的 – user1146440 2012-02-25 12:07:02

所以使用'#bpath ul：hover li.triangle'選擇器。正如你沒有詳細說明（或者說我無法確切地知道你想要什麼），我不得不猜測很多東西，因此選擇器的選擇很大。 =/ – 2012-02-25 12:08:44

我已經把一類懸停到第一和第三鋰，所以你可以看到我想要的東西我已經在我的代碼中做了這個，它仍然劑量工作 – user1146440 2012-02-25 12:12:43

，你應該用這種方式，

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

來源

2012-02-25 12:02:09 sinanakyazici

你可以使用這個小提琴，這改變了三角形的顏色和適應它澄清你的問題。 http://jsfiddle.net/j7YSu/1/

（或者只是接受它作爲正確答案:)）

我有一些問題與您的代碼，但也許這撥弄將幫助：http://jsfiddle.net/j7YSu/3/

來源

2012-02-25 12:02:45 mindandmedia

我不是想改變顏色與一類triger同時徘徊在它我是tryong改變它的顏色，而徘徊在另一個項目 – user1146440 2012-02-25 12:08:05

懸停時的邊框顏色變化

回答

相關問題