4

では、div '.prodimg' をマウスの位置に合わせたいと思います。これは機能しますが、'.details' と '.prodimg' の親 div である #wrapper の左側の位置に相対的に配置されていることを除きます。なぜこうなった？それを修正するための提案、またはマウスを追跡する代替方法はありますか?

'.prodimg' のトップ位置が #wrapper トップに対して相対的だったので、それを padding-top に変更し、.prodimg を修正しました。これは私の問題と関係がありますが、左の位置に対して同様の解決策を見つけることができません。理想的には、pageX と pageY をウィンドウ全体に関連付けるためにラッパーを変更する必要はありません。

'#wrapper' position:relative を試してみましたが、何も変わりませんでした。「.details」は、インラインで浮動できるように相対的でなければなりません。ラッパーの下にjqueryを入力しました。「ウィンドウ」の代わりに「ドキュメント」を使用してみました。これと関係があるかどうかはわかりません...助けてください！私はこの問題でほぼ 3 時間を失いました :/

ここに私のフィドルがあります：http://jsfiddle.net/vg2zL/

$(document).ready(function() {
var mouseX;
var mouseY;
$(window).mousemove( function(e) {
 mouseX = e.pageX; 
 mouseY = e.pageY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(window).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});

ここに私のスタイルがあります

#wrapper {
 width: 700px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -351px;
 font-size: 30px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:200px;
 display:inline-block;
 line-height:40px;
 margin-right:50px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:absolute;
 z-index:-1;
}
4

2 に答える 2

3

絶対的に配置された要素のtopandleftプロパティは、要素の最初の静的に配置されていない祖先に相対的であるため、（Webページのコードから）次の.prodimgように配置されます。#wrapper

代わりに、固定位置要素とクライアント座標（つまり、 clientX、clientY）を使用できます。

http://jsfiddle.net/vg2zL/1/

$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.clientX; 
 mouseY = e.clientY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(document).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});
#wrapper {
 width: 280px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -141px;
 font-size: 10px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:60px;
 display:inline-block;
 margin-right:20px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:fixed;
 z-index:-1;
 background-color:blue;
 width:50px;
 height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a>
  <div class="prodimg"></div>
  </div>
      <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
</div>

于 2012-08-16T02:33:48.420 に答える
0

offsetjQuery でどのように動作するか調べましたか? 詳細については、http : //api.jquery.com/offset/を参照してください。これは問題の解決に役立つ場合があります。関連するものを jsFiddle に入れて、あなたを助けやすくすることは可能ですか?

jquery には、マウスの位置がどのように機能するかについての優れたドキュメントがあります: http://docs.jquery.com/Tutorials:Mouse_Position

ここの同様の質問で良い説明を見つけました: jQuery get mouse position within an element。うまくいけば、それがあなたの質問に答えるのに役立ちます.

于 2012-08-16T02:15:04.937 に答える