Question

您好我有3个字段，每个字段都有不同的工具提示。如何才能获得正确的工具提示？ :)没有为其他字段制作3个其他脚本。我的代码看起来像这样：

这是我的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>

一些想法？：）

Answer 1

页面上的多个元素不能具有相同的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();
            });

我在使用jQuery在javascript中添加工具提示时遇到问题

1 个答案: