我在使用jQuery在javascript中添加工具提示時遇到問題

-1

您好，我有3個字段，每個字段都有不同的工具提示。我怎樣才能正確的工具提示正確的領域？ :)沒有製作另外3個腳本到對方領域。我的代碼看起來就像是：我在使用jQuery在javascript中添加工具提示時遇到問題

這是我的javascript：

$(document).ready(function(){ 
     $(".mybox").hover(function(){ 

     $(".tooltip").css("display", "block");}, 
     function(){ 
     $(".tooltip").css("display", "none"); 

     }); 

     $(document).mousemove(function(event){ 
     var mx = event.pageX+15; 
     var my = event.pageY+15; 
     $(".tooltip").css("left", mx+"px").css("top", my+"px"); 

     }); 

    });

這是我的CSS：

.mybox { 
    margin-left:auto; 
    margin-right:auto; 
    magrgin-top: 100px; 
    width:250px; 
    background-color: grey; 
    padding: 10px; 
    text-align: center 
    } 
.tooltip { 
    position:absolute; 
    z-index:2; 
    width 300px; 
    padding: 5px; 
    background-color: orange; 

    border-radius: 5px; 
    display:none; 
    }

和我的HTML看起來像代碼：

<body> 
<div> 
    <div class="mybox"> 
     aaa 
    </div> 
    <div class="tooltip"> 
     ddd 
    </div> 
</div> 
<div> 
    <div class="mybox"> 
     bbb 
    </div> 
    <div class="tooltip"> 
     eee 
    </div> 
</div> 
<div> 
    <div class="mybox"> 
     ccc 
    </div> 
    <div class="tooltip"> 
     fff 
    </div> 
</div> 
</body>

一些想法？ :)

來源

2014-01-29 miroyeah

'[ID]'屬性都必須是唯一的。改用'[class]'。 – zzzzBov

好的。當我使用課程時，他們向我展示了所有的工具箱...... – miroyeah

你想用'mousemove'事件做什麼？你將它們全部放在一起，同時它們都會一起顯示 –

頁面上不能有多個具有相同ID的元素。

也許類似這樣的工作：注意，你必須改變你的CSS協會類，而不是ID的

HTML: 
<div> 
    <div class="mybox"> 
    bbb 
    </div> 
    <div class="tooltip"> 
    ccc 
    </div> 
</div> 


JS: 
      $(".mybox").mouseover(function() { 
       $(this).next('.tooltip').show(); 
      }).mouseout(function() { 
       $(this).next('.tooltip').hide(); 
      });

來源

2014-01-29 17:56:18 lonewolf217

我在使用jQuery在javascript中添加工具提示時遇到問題

回答

相關問題