hover - CSS div that appears when hovering on anchor; keeping it visible while hovering over div -

i have div want pop when hover on link before it. hover works great, there link inside div appears want people able click disappears when try go it.

here jsfiddle

i trying use css here if need jquery or cool.

#soldoutinfo {                                             padding:4px 2px;     font-size:10px; }  #soldoutinfo, .soldout {                                             display:inline; }  #soldoutinfo {                                         color:#cc0000; }  #soldoutinfo a:visited {                                 color:#cc0000; }  #soldoutinfo + div {                                         display:none;     width:0;     height:0;     position:absolute; }  #soldoutinfo:hover + div {                               display:block;     height:60px;     width:250px;     background:#ffffff;     box-shadow: 0 0 4px #888888;     position: absolute;     padding: 8px;     top: 19px;     left:12px;     z-index:1000; }  #soldoutinfo + div p {                               font-size:12px; }  <p id="soldoutinfo">     <sup><a>?</a></sup> </p> <div> <p>hope not lost! <a href="#">send message</a> , see if our stores have in stock ship you. </p> </div> 

the problem hover effect on element after anchor. when leave anchor, hover effect end to.

you fix this, although it's not cleanest solution: set tooltip inside anchor, using span

<p id="soldoutinfo">     <sup><a>?</a></sup>     <span>hope not lost! <a href="#">send message</a> , see if our stores have in stock ship you.</span> </p> 

#soldoutinfo span {                                      display:none;     width:0;     height:0;     position:absolute; }  #soldoutinfo:hover span {                                display:block;     height:60px;     width:250px;     background:#ffffff;     box-shadow: 0 0 4px #888888;     position: absolute;     padding: 8px;     top: 19px;     left:12px;     z-index:1000; } 

jsfiddle demo