How to control hover effect in CSS3?

Question

In the example below, I will show you an example of what I have right now, and you will notice that when you hover over a black box, there is a transition and slides in my tooltip. My problem is that I want this tooltip to appear only when you hover over a black box. In the example, you will notice that if you hover over black or somewhere within 180 pixels to the right of the black box, the transition still happens (this is because my graphics are 180 pixels wide)! I want to limit the hover effect to just a black box! Please, help!

HTML

    <div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
</div>

CSS

#sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
}

Example:

JSFIDDLE

Answer 1

, , - , , .

, height: 0.

#regionsUnitedStatesTooltip {
    height: 0;
    transition: opacity ease-in-out 0.25s, left ease-in-out 0.25s;
}

#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    height: 60px;
}

~ http://jsfiddle.net/pTMCP/3/

Update

, ...

#regionsUnitedStatesTooltip {
    visibility: hidden; /* add this */
}

#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    visibility: visible; /* and this */
}

~ http://jsfiddle.net/pTMCP/5/