本文介绍了悬停时边框颜色更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在尝试用CSS创建 border-color
更改悬停效果,似乎无法正常工作。这是我的代码:
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:
标记:
<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 & 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
元素的颜色,并且工作。
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?
推荐答案
如果您希望更改所有三角形li,请使用:
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;
}
我认为这不适用于ie。如果你想要在IE上工作,我会去jquery。
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
这篇关于悬停时边框颜色更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!