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

Question

如何让一个固定的三 Angular 形div容纳文字和图片？

另外我所做的是 this但是这里当 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;
}

Another fiddle

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