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

enano2054 Published at Dev

enano2054

I have a div that I want to pop up when I hover over the link before it. The hover works great, but there is a link inside the div that appears that I want people to be able to click but it disappears when I try to go to it.

Here is the jsfiddle

I am trying to use just CSS here but if I need any jquery or anything then cool.

#soldoutinfo a {                                        
    padding:4px 2px;
    font-size:10px;
}

#soldoutinfo, .soldout {                                        
    display:inline;
}

#soldoutinfo a {                                    
    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 is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.
</p>
</div>

LinkinTED

The problem is that the hover effect is on the element after the anchor. So when you leave the anchor, your hover effect will end to.

You could fix it like this, although it's not the cleanest solution: Set your tooltip inside your anchor, using a span

<p id="soldoutinfo">
    <sup><a>?</a></sup>
    <span>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to 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

Collected from the Internet

Please contact [email protected] to delete if infringement.