Share buttons issue

I have this problem with the code below, I made made this code where "div" expands from right to left on hover, I need that expansion to come back when the mouse is off of the bottom area (48x48px)…

height: 800px;
    margin: 20px auto 20px auto;
    border: 1px solid #ebebeb;
    box-shadow: 2px 2px 4px #ebebeb;
    position: relative;
}


/* --- Shere buttons --- */

.share {
    position: absolute;
    top: 270px;
    right: 970px;
    width:161px;
    height:auto;
}

.top-share {
    width: 145px;
    border-left: solid 1px #ebebeb;
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    margin: 0px;
    background: #f7f7f7;
    padding-left: 15px;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 46px;
}

.top-share span {
    background: url(img/share-img.png) no-repeat #f7f7f7;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    left: 4px;
    vertical-align: middle;
}
a {display: block;}

.share-botton-fb, .share-botton-tw, .share-botton-gp, .share-botton-inst, .share-botton-pin {
    width: 48px;
    height: 48px;
    background: #ebebeb no-repeat;
    position: relative;
    left: 113px;
    display: block;
    -webkit-transition: width .3s, left .3s;
}

.fb {
    width: 48px; height:48px;
    position: relative;
    background: url(img/facebook.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.fb:hover {background-image: url(img/facebook-hover.png); background-color: #3b5998; }
.share-botton-fb:hover { background: url(img/fb-text.png) center #3b5998 no-repeat; width: 161px; left: 0;}

.tw {
    width: 48px;
    height: 48px;
    position: relative;
    right: 0px;
    background: url(img/twitter.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.tw:hover {background-image: url(img/twitter-hover.png); background-color: #2ba9e1;}
.share-botton-tw:hover { background: url(img/tw-text.png) center #2ba9e1 no-repeat; width: 161px; left: 0;}

.gp {
    width: 48px;
    height: 48px;
    position: relative;
    background: url(img/google-plus.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all  .3s;
}
.gp:hover {background-image: url(img/google-plus-hover.png); background-color: #dd4b39;}
.share-botton-gp:hover { background: url(img/gp-text.png) center #dd4b39 no-repeat; width: 161px; left: 0;}

.inst {
    width: 48px;
    height: 48px;
    position: relative;
    background: url(img/instagram.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.inst:hover {background-image: url(img/instagram-hover.png); background-color: #517fa4;}
.share-botton-inst:hover { background: url(img/inst-text.png) center #517fa4 no-repeat; width:161px; left:0;}

.pin {
    width: 48px; height: 48px;
    position: relative;
    background: url(img/pinterest.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.pin:hover {background-image: url(img/pinterest-hover.png); background-color: #d73532;}
.share-botton-pin:hover { background: url(img/pin-text.png) center #d73532 no-repeat; width: 161px; left: 0;}
	
/* --- Share buttons END --- */

<div id="main">
    <div class="share">
        <div class="top-share">icons below <span></span></div>
        <div class="share-botton-fb"><a href="#"><div class="fb">FB</div></a></div>
        <div class="share-botton-tw"><a href="#"><div class="tw">TW</div></a></div>
        <div class="share-botton-gp"><a href="#"><div class="gp">GP</div></a></div>
        <div class="share-botton-inst"><a href="#"><div class="inst">INST</div></a></div>
        <div class="share-botton-pin"><a href="#"><div class="pin">PIN</div></a></div>
    </div>
</div>

Solution

There's some incomplete CSS code in the beginning of your snippet, which I'm going to omit.

If I got your issue right, the problem is that the grey area with FB, TW and so on is not highlighted when you move your mouse to the highlighted area on the left. That is because you're not hovering this div on the right anymore.

What you need is to add a selector for when you hover on the left-side div, the right-side should also be highlighted. So, for example, you need to change the selector .fb:hover to .fb:hover, .share-botton-fb:hover .fb.

I also fixed the CSS indentation and added a missing closing div in the HTML.

I had to comment out position: absolute; of .share because then you wouldn't see the div in the snippet. But on your website you probably need to uncomment it.

Here's the code:

/* --- Shere buttons --- */

.share {
    /*position: absolute;*/
    top: 270px;
    right: 970px;
    width:161px;
    height:auto;
}

.top-share{
    width: 145px;
    border-left: solid 1px #ebebeb;
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    margin: 0px;
    background: #f7f7f7;
    padding-left: 15px;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 46px;
}

.top-share span {
    background: url(img/share-img.png) no-repeat  #f7f7f7;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    left: 4px;
    vertical-align: middle;
}
a {display:block;}

.share-botton-fb, .share-botton-tw, .share-botton-gp, .share-botton-inst, .share-botton-pin {
    width:48px;
    height:48px;
    background:#ebebeb no-repeat;
    position:relative;
    left:113px;
    display:block;
    -webkit-transition: width .3s, left .3s;
}


.fb {
    width:48px; height:48px;
    position:relative;
    background:url(img/facebook.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all .3s;
}
.fb:hover, .share-botton-fb:hover .fb {background-image:url(img/facebook-hover.png); background-color:#3b5998; }
.share-botton-fb:hover { background: url(img/fb-text.png) center #3b5998 no-repeat; width:161px; left:0;}


.tw {
    width:48px; height:48px;
    position:relative;
    right:0px;
    background:url(img/twitter.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all .3s;
}
.tw:hover, .share-botton-tw:hover .tw {background-image:url(img/twitter-hover.png); background-color:#2ba9e1;}
.share-botton-tw:hover { background: url(img/tw-text.png) center #2ba9e1 no-repeat; width:161px; left:0;}


.gp {
    width:48px; height:48px;
    position:relative;
    background:url(img/google-plus.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.gp:hover, .share-botton-gp:hover .gp {background-image:url(img/google-plus-hover.png); background-color:#dd4b39;}
.share-botton-gp:hover { background: url(img/gp-text.png) center #dd4b39 no-repeat; width:161px; left:0;}

.inst {
    width:48px; height:48px;
    position:relative;
    background:url(img/instagram.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.inst:hover, .share-botton-inst:hover .inst {background-image:url(img/instagram-hover.png); background-color:#517fa4;}
.share-botton-inst:hover { background: url(img/inst-text.png) center #517fa4 no-repeat; width:161px; left:0;}

.pin {
    width:48px; height:48px;
    position:relative;
    background:url(img/pinterest.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.pin:hover, .share-botton-pin:hover .pin {background-image:url(img/pinterest-hover.png); background-color:#d73532;}
.share-botton-pin:hover { background: url(img/pin-text.png) center #d73532 no-repeat; width:161px; left:0;}
    
/* --- Share buttons END --- */

<div id="main">
    <div class="share">
        <div class="top-share">icons below <span></span></div>

        <div class="share-botton-fb"><a href="#"><div class="fb">FB</div></a></div>
        <div class="share-botton-tw"><a href="#"><div class="tw">TW</div></a></div>
        <div class="share-botton-gp"><a href="#"><div class="gp">GP</div></a></div>
        <div class="share-botton-inst"><a href="#"><div class="inst">INST</div></a></div>
        <div class="share-botton-pin"><a href="#"><div class="pin">PIN</div></a></div>
    </div>
</div>