0

ユーザーがマップされた画像の領域にカーソルを合わせると、非表示の div が表示されます。しかし、非表示の div をマウスの横に配置する必要があります。現在、マウスからある程度離れた位置に配置されており、この距離はブラウザー ウィンドウのサイズによって異なります。

jquery:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();         
        $(".box").css({             
            top: (e.pageY - 240) + "px",             
            left: (e.pageX - 90) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});

CSS:

.hover_link{
    display:block;
}
.box{
    float: left;
    vertical-align: top;
    display:none;
    height: 80px;
    width: 250px;
    background-color: #FFF;
    position: absolute;
    z-index: 1000;
    padding:10px 10px 10px 0;
    }
    .boxinner{
    text-align:left;
    max-width:140px;
    padding-left:10px;
    height:80px;
    float:left;
    vertical-align:top;
    }

HTML:

<img src="http://www.poltairhomes.com/images/swmap.jpg" width="900" height="642" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area class="hover_link" shape="circle" coords="574,143,10" href="http://www.poltairhomes.com/trecerus-farm" />
</map>
<div class="box" id="box1" align="center">
    <div class="boxinner">
        <img src="http://www.poltairhomes.com/images/homethumb1.png" width="80px" height="80px" />
    </div>
    <div class="boxinner">Trecerus Farm Development: 22 Two, Three &amp; Four bed homes.
    </div>
</div>

ウェブサイト: http://www.poltairhomes.com/developments/

よろしくお願いします。

編集: jqueryを次のように更新しましたが、非表示のdivがまったく表示されなくなりました:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();         
        $(".box").css({             
            top: ((e.pageY - $("#main").offest().left) + 10) + "px",             
            left: ((e.pageX - $("#main").offset().top) + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});

編集 2: jquery は次のようになりましたが、ここでも非表示の div が表示されません。

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $("#box1").show();
            var main = $("#main");
            var offset = main.offset();
            var mouseY = (e.pageY - main.offset.left); 
            var mouseX = (e.pageX - main.offset.top);        
            $(".box").css({             
                top: (mouseY + 10) + "px",             
                left: (mouseX + 10) + "px"        
            });    
        });     
    $(".hover_link").mouseout(function(e){         
        $("#box1").hide();     
    });
});
4

2 に答える 2

1

topおよびleftプロパティをposition：absoluteを持つ要素に設定すると、これらの値は、 position：relativeを持つ最初の親要素からの距離になります。

.singular .hentryのCSSは、divが含まれるarticle要素に対してposition：relativeを設定します。したがって、top：50pxを設定すると、ページの上部から50ピクセルではなく、その記事要素の上部から50ピクセルになるはずです。

article要素からposition：relativeを削除するか、divの座標を計算して、ページ全体ではなく、article要素を基準にするようにします。

編集：また、e.pageXとe.pageYからdivの次元を差し引くべきではありません。左上の値は、divの左上隅が開始する場所を指定します。両方の値に5pxを追加して、カーソルのすぐ横に表示することができます。

EDIT2：これは私のために働いています：

$(".hover_link").mouseover(function(e) {
    $("#box1").show();
    var offset = $('#mapwrapper').offset();
    $(".box").css({
      top: (e.pageY - offset.top + 10) + "px",
      left: (e.pageX - offset.left + 10) + "px"
    });
});
于 2012-06-26T12:43:51.670 に答える
0

それで！結局のところ、問題は、ページの中央に固定された幅のdiv内にあるdivでjqueryを実行していたことでした。

これを回避するために、基本的にhtmlドキュメントの幅を検出し、divの固定幅を減算し、残りを2で割って、非表示のdivをポップするためにマウス計算をオフセットするために必要な左マージンを取得しました。ウィンドウサイズに関係なく、マウスの横に表示されます。

サイトのヘッダーも固定サイズであるため、マウスの位置から高さを差し引いて、非表示をdivに設定し、他の軸に正しく配置しました。

最終フィドル： http： //jsfiddle.net/3kWq7/10/ 最終結果： http： //jsfiddle.net/3kWq7/10/embedded/result/ 最終jquery：

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});

助けてくれたすべての人に感謝します！

于 2012-06-27T10:51:51.270 に答える