javascript - 制作一个三角形 div 来保存文本并在悬停时关闭

Question

如何让一个固定的三角形 div 保存文本和图像？

我所做的也是这样，但是当 div 在悬停时打开时，当我悬停时，它不会关闭，因为 div 是方形的，所以当用户悬停时我需要这样做， div应该关闭吗？

jQuery也会很好

CSS

.map {
    background-color: transparent;
    position: absolute;
    border-top: 0px;
    border-right: 500px solid transparent;
    border-left: 0;
    border-bottom: 500px solid #ff0000;
    width: 0;
    position: fixed;
    bottom: -440px;
}

.map:hover {
    bottom: 0px;
}

另一个小提琴

Answer 1

例如，如果您检查 chrome 中的元素，您会看到尽管您使用边框来创建这个技巧，但 div 仍然是一个正方形，当您将鼠标悬停在它上面时，它会覆盖左下角 500x500 像素

您可能需要考虑跟踪鼠标坐标以实现您想要的。

$(".map").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});