悬停时无法更改水平标尺颜色
我可以在悬停时更改无序列表的背景和字体颜色。
但是,我无法让我的横向规则变成相同的颜色。
我试图达到与公司网站上相同的样式
li {
width: 250px;
min-height: 300px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
margin: 20px;
zoom: 1;
*display: inline;
_height: 250px;
cursor: pointer;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s; }
li:hover {
background-color: #746262;
color: #ffffff;
}
li p {
font-size: 14px;
}
li h2 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 2px;
}
<div style="text-align: center; vertical-align: middle;">
<li>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="100%" height="160"/>
<div style="padding: 5px;">
<h2>Product</h2>
<hr width="80%" />
<p>Exclusive designs by Rose Eddington<br />Including 15 notelets and envelopes</p>
<span style="text-transform:uppercase; font-size: 12px;">Just £6.95</span>
</div>
</li>
</div>
我希望有人能帮助,谢谢!
JSFiddle演示
加
CSS
li:hover hr { border-color:orange }
你正在寻找的是改变边界颜色。
( 这里现场演示):这个测试
li:hover hr {
border-color: #746262;
}
li:hover {
background-color: #746262;
color: #ffffff;
}
链接地址: http://www.djcxy.com/p/15753.html
上一篇: Cannot change horizontal rule color on hover
下一篇: color on <hr> tag?