Question

当我将鼠标悬停在图像上的某个区域上时，我想要显示一个div。悬停效果很好，当命中区域悬停时会出现div，但是我遇到了两个问题。

出现的div需要位于覆盖背景图像的特定位置，但这意味着它会阻挡命中区域的一部分。被出现的div阻挡的命中区域部分不再因此而触发悬停效果，即使它不可见。没有办法重新定位或调整出现的div的大小，因此命中区域被解锁，因为它们需要与特定区域相对应。如何确保整个命中区域在保持显示div的位置的同时触发悬停效果？
出现的div包含一个号召性用语按钮，用户需要能够在看到div出现后点击它。但是，当用户移动到单击按钮时，出现的div消失。有没有办法可以让div保持足够长的时间，以便用户可以点击按钮？

我想用CSS实现这个目标，但如果JS是必要的，那很酷。

我创建了这个fiddle，粗略地了解了问题所在。正如您所看到的，所有三个红色框都应该触发悬停效果，但只有最后一个实际发生，因为悬停时出现的div会阻止它们。该按钮将出现在蓝色框内，但只要鼠标离开命中区域，该框就会消失。

我使用不透明度来显示和隐藏div，因为我们的网站具有允许淡入淡出的过渡。代码被简化并删除，但说明了这个想法。

HTML：

<a class="hover-grid hit-area">
    &nbsp;
</a>
<a class="hover-grid hit-area">
    &nbsp;
</a>
<a class="hover-grid hit-area">
    &nbsp;
</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

只需将悬停效果应用于.detail。而不是不透明度使用display：none，不触发不可见元素上的悬停状态。

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;
}

悬停块上出现的div悬停状态命中区域

1 个答案: