Same code but two effects with hover range

Problem

I have that code below, It's seems to works but, space when transition works is difrent in archOver and postOver. Height, widht, positions are the same, but when I hover at arch it works fine because transition "move" only then. But transition in post "move" when I hover at post. I think that souldn't works that way, in my opinion transistion should "move" only when I hove at postOver. What do you think?

CSS:

  body{
        font-family:"Segoe UI";
        font-size:16px;
        color:white;
        background-color:white;
        padding:0px;
        margin:0px;
        }

    div#sidebar {
        position:fixed; left:0px;
        margin-left:1%;
        padding-left:3px;
        padding-right:3px;
        width:224px;
        height:100%;
        }
    #logo {
        margin-top:5%;
        width:222px;
        height:222px;
        background-image:url(img/logo_thu.png);
        background-repeat:no-repeat;
        background-position:center;
        box-shadow:0px 0px 3px #000000; 
        }
    #archOver{
        margin-top:5%;
        width:222px;
        height:222px;
        background-image:url(img/arch.jpg);
        box-shadow:0px 0px 3px #000000;
        -webkit-transition:width 1s;
        }
    *:hover > #archOver{
        width: 0;
    }
    #archText{
        position:relative; top:-222px;
        font-size:12px;
        width:222px;
        height:222px;
        box-shadow:0px 0px 3px #000000;
        color:black;
        text-align:center;
        z-index:-1;
        }


    div#footer{
        margin:0 1% 0 1%;
        position:fixed; bottom:1%;
        width:98%;
        font-size:10px;
        text-align:center;
        background-color:#000000;
        box-shadow:0px 0px 3px #000000;

        }
    a:link, a:hover, a:visited {
        text-decoration:none;
        color:inherit;  
        }

--------------SAME AS SIDEBAR---------------
    div#post {
        position:fixed; right:0px;
        margin-left:1%;
        padding-left:3px;
        padding-right:3px;
        width:224px;
        height:100%;
        }
    #logo2 {
        margin-top:5%;
        width:222px;
        height:222px;
        background-image:url(img/logo_thu.png);
        background-repeat:no-repeat;
        background-position:center;
        box-shadow:0px 0px 3px #000000; 
        }
    #postOver{
        margin-top:5%;
        width:222px;
        height:222px;
        background-image:url(img/arch.jpg);
        box-shadow:0px 0px 3px #000000;
        -webkit-transition:width 1s;
        }
    *:hover > #postOver{
        width: 0;
    }
    #postText{
        position:relative; top:-222px;
        font-size:12px;
        width:222px;
        height:222px;
        box-shadow:0px 0px 3px #000000;
        color:black;
        text-align:center;
        z-index:-1;
        }

HTML:

<body>
<div id="sidebar">
    <div id="logo"></div>   
    <a href="index.html">
    <div id="archOver"></div></a>
    <div id="archText"></div>
</div>


<div id="post">
    <div id="logo2"></div>
    <div id="postOver"></div>
    <div id="postText">text</div>
</div>

<div id="footer">
 </div>   


</body>
Problem courtesy of: Błażej

Solution

I've solved it!

The <a href> .. </a> was restricting hover area.

Solution courtesy of: Błażej

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.