如何让鼠标点击后悬停？

用户将鼠标悬停在glyphicon-globe图片上，在其后面有一个类似按钮和评论表单。当用户去点击按钮或评论表单什么也没有发生。我怎样才能点击全球背后的东西？如何让鼠标点击后悬停？

视图

<div class="image-container"> 
    <span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span> 
    <div class="text-wrapper"> 
    <div class="like-button"> 
     <%= link_to like_challenge_path(:id => @challenge.id), class: "btn", method: :post do %> 
     <span class='glyphicon glyphicon-thumbs-up'></span> Like 
     <% end %> 
    </div> 

    <div class="text-background"> 
     <%= render "comments/form" %> 
    </div> 
    </div> 
</div>

CSS

.image-container { 
    position: relative; 
    height: auto; 

    #image-foreground { 
    position: absolute; 
    z-index: 2; 
    opacity: 1; 
    &:hover { 
     opacity: 0; 
    } 
    } 
} 

.text-wrapper { 
    opacity: 1; 
}

没有悬停

悬停

来源

2016-05-13 AnthonyGalli.com

由于'Z-index'在'图像foreground' ID你是不是能够点击元素 –

如果要变成可点击只有一个元素您可以捕获前端对象的单击，使该对象消失，然后在需要的元素中生成单击。 –

谢谢@pitabasprathal。问题在于我把z-index设置为负值，但是随后地球图像闪烁，导致我癫痫发作 –

你可以悬停显示上做蓝色屏幕无法比拟的。

.image-container:hover { 
    display: none; 
}

这就是你想要的吗？

来源

2016-05-13 18:46:19 killereks

没有工作，但感谢您尝试 –

您可以添加到第二个悬停显示：块; – killereks

不适用于后者。与以前相同的行为，但我应该详细说明'display：none;'当我将鼠标悬停在它上面时，它会一直闪烁。我可以点击，但是地球正在发挥作用，如果在现场徘徊，将不会保持不动 –

有两种方法可以尝试。所以你知道，给出一个元素opacity: 0;不会使它完全消失。它仍然存在，但无法被看到。要删除某个元素，请在&:hover操作中同时使用opacity: 0;和visibility: hidden。

你可以做的是坚持opacity: 0还设置z-index: 0（或任意数量的底层的z-index的下面，你必须悬停很好地工作，但第二种方式，因为它具有更高的z-index比底层，它在技术上仍坐在他们的顶部和覆盖他们，使他们无法点击。

希望帮助

另外一个侧面说明下面的答案，答案在贵hover行动使用display: none这里建议。display: none不适用于此，因为一旦元素设置为display: none，它不再存在，不是DOM的一部分，因此打破悬停动作。

来源

2016-05-14 01:00:37 RuNpiXelruN

嘿，上述所有。仍然不会点击：/感谢您的详细解释:) –

这里是工作的伎俩：

.hide-globe { 
    position: absolute; 
    width: 100%; 
    background-color: #ccac00; 
    padding: 100px; 
} 

.text-wrapper { 
    position: absolute; // This was essential 
    opacity: 0; 
    z-index: 1; 
    width: 100%; 
    &:hover { 
    opacity: 1; 
    background-color: white; // And this helped make the image seemingly go away 
    } 
}

来源

2016-05-14 17:56:19

如何让鼠标点击后悬停？

回答

相关问题