Change an inner div while hovering the container

I've managed to make it work on Chrome... But in doesn't work on IE and Firefox... I've no idea why.... Can someone help me?

<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/89468.html

上一篇: 容器DIV在调整大小时伸展，但不在滚动时伸展

下一篇: 悬停容器时更改内部div