0

固定三角形の 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;
}

別のフィドル

4

1 に答える 1

0

たとえば、クロムの要素を調べると、境界線を使用してこのトリック div を作成しているにもかかわらず、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;
});
于 2013-01-21T08:50:50.830 に答える