悬停容器时更改内部div
我已经设法使它在Chrome上工作...但在IE和Firefox中无法使用...我不知道为什么....有人可以帮助我吗?
<div id="rsscontainer" class="rss">
<div id="rssbutton" class="rss">
<div id="rssinner" class="rss">
<img src="imageurlhere">
#rsscontainer {
top: 30px;
position: absolute;
width: 20px;
height: 20px;
}
#rssbutton {
vertical-align: middle;
width: 81px;
height: 81px;
position: absolute;
left: -1px;
top: -30px;
padding: 0px;
padding: 0px;
border-right: 1px solid #e0e1e1;
border-bottom: 1px solid #e0e1e1;
border-left: 1px solid #e0e1e1;
background-color: #f5f7f7;
-webkit-box-shadow: inset 0px 0px 0px 1px #f9fafa;
-moz-box-shadow: inset 0px 0px 0px 1px #f9fafa;
box-shadow: inset 0px 0px 0px 1px #f9fafa;
z-index: 20;
color: #f5f7f7;
font-weight: bold;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
#rssbutton:hover {
background-color: #f86c00;
-webkit-box-shadow: inset 0px 0px 0px 1px #f77918;
-moz-box-shadow: inset 0px 0px 0px 1px #f77918;
box-shadow: inset 0px 0px 0px 1px #f77918;
border-right: 1px solid #d45d01;
border-bottom: 1px solid #d45d01;
border-left: 1px solid #d45d01;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
#rssinner {
position: relative;
top: 14px;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
#rssbutton:hover > #rssinner {
filter: brightness(0.5); invert(1);
-webkit-filter: brightness(0.5) invert(1);
-moz-filter: brightness(0.5) invert(1);
-o-filter: brightness(0.5) invert(1);
-ms-filter: brightness(0.5) invert(1);
-webkit-transition: all 70ms linear;
-moz-transition: all 70ms linear;
-o-transition: all 70ms linear;
-ms-transition: all 70ms linear;
transition: all 70ms linear;
}
http://jsfiddle.net/damix55/V6jvd/
链接地址: http://www.djcxy.com/p/89467.html上一篇: Change an inner div while hovering the container
下一篇: Bootstrap Navbar only showing collapsed edit: Fixed But Navbar not collapsing
