html - Set DIV display:block on A:hover Trigger (using only CSS) -

i'm trying trigger div display:none; display:block; when link hovered. i've tried achieve reaction through adjacent sibling selector target div doesn't change none block. think it's because i'm not defining correct hierarchy, have no idea else try.

<div id="home_bar">     <div id="welcome_left">         i’m <a href="#" id="name">anthony</a>.     </div>      <div id="welcome_right">         <div id="name_desc">i love lamp.</div>     </div> </div> 

the above html powered following css:

#home_bar { display: table-row; width: 888px; border: 1px solid red; margin-top: 80px; }  #welcome_left { letter-spacing: -1px; font-size: 36pt; line-height: 36pt; width: 666px; color: #606060; cursor: default; display: table-cell; float: left; }  #welcome_right { float: right; width: 200px; display: table-cell; position: relative; }  #name:hover { color: #00a68d; cursor: default; }  #name_desc { top: 50px; position: absolute; display: none; }  #name:hover + #name_desc { display: block; } 

i tried following last line:

#home_bar > #name:hover + #name_desc { display: block; } 

as seemed right course of action based on this question, still can't achieve desired affect (to clear, desired effect is: hover link on left, trigger appearance of content on right).

any thoughts regards doing differently here? i'm hoping avoid jquery if can i'm lot more comfortable working css, i'm stuck.

the adjacent sibling combinator has used sibling elements. in instance, #welcome_left , #welcome_right siblings. therefore, when #welcome_left hovered over, select sibling #welcome_right's child element #name_desc.

example here

#welcome_left:hover + #welcome_right #name_desc {     display: block; } 

unfortunately, can't use following, because #name , #welcome_right not sibling elements. in css, currently can't transverse dom, therefore there aren't parent selectors.

#name:hover + #welcome_right #name_desc {     display: block; /* doesn't work because aren't siblings .. */ }