div that appears on hover blocks hover state hit area - html

Question

I have a div that I want to appear when hovering over a certain area on an image. The hover effect works fine and the div appears when the hit area is hovered over, but there are two problems I am encountering.
The div that appears needs to be in a specific position overlaying the background image, but this means that it blocks part of the hit area. The portion of the hit area that is blocked by the appearing div no longer triggers the hover effect because of this, even when it is not visible. There is no way to reposition or resize the appearing div so the hit area is unblocked because they need to correspond to specific areas. How can I make sure the entire hit area triggers the hover effect while maintaining the position of the appearing div?
The div that appears holds a call to action button that users need to be able to click on once they see the div appear. However, the appearing div disappears when the user moves to click on the button. Is there a way that I can make the div remain visible long enough so the user can click the button?
I would like to accomplish this using CSS, but if JS is necessary, that's cool.
I created this fiddle as a rough idea of what the problem is. As you can see, all three of the red boxes should trigger the hover effect, but only the last one actually does because the div that appears on hover blocks them. The button would appear within the blue box, but the box disappears as soon as the mouse leaves the hit area.
I'm using opacity to show and hide the div because our site has transitions that would allow this to fade in and out. The code is simplified and stripped down, but illustrates the idea.
HTML:
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<div class="details">
</div>
CSS:
.hover-grid
{
background-color: red;
opacity: 0.25;
width:100px;
height:100px;
display: block;
float:left;
}
.details
{
opacity: 0;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
opacity:1;
}

Answer 1

Just apply the hover effect to .detail as well. And instead of opacity use display:none, to not trigger the hover state on the invisible element.
http://jsfiddle.net/me2loveit2/3shj2omg/3/
.details
{
display:none;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
display:block;
}
.details:hover
{
display:block;
}