有人如何在元素 y 悬停时显示元素 x 并使用 jQuery 将其放在它旁边？答案

【问题标题】：How can someone show the element x on hover of element y and place it next to it using jQuery?有人如何在元素 y 悬停时显示元素 x 并使用 jQuery 将其放在它旁边？
【发布时间】：2019-10-15 17:57:14
【问题描述】：

我很难将一个（工具提示）元素链接到另一个元素。一旦用户将鼠标悬停在另一个元素上，工具提示元素就会显示出来。

我的想法是相应地设置一个jQuery悬停函数来操作显示属性。

所以我的问题基本上是

如何在jQuery中构造这种函数？现在悬停时根本没有效果，即使我只是在悬停时尝试alert("Test")。鼠标指针似乎无法识别创建的元素。
悬停时如何将工具提示元素放置在初始元素旁边？（现在工具提示元素默认是隐藏的，不会在 HTML 正文中占据任何位置）

这是 JS 部分，尚未显示悬停效果（带有一个工具提示的示例）

$( "#id10" ).hover(
  function() {
    $( "#tooltip10" ).removeAttr("display");
  }, function() {
    $( "#tooltip10" ).css( "display:none" );
  }
);

循环部分工作得很好：

  $.ajax({
    method: "GET",
    async: "True",
    dataType: "json",
    url: "https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/fixtures/team/" + team_id,
    success: function(response) {

      $('.datapoint').remove();

      var responseData = response.api.fixtures;

      $.each(responseData, function(i) {

        if (team_id == response.api.fixtures[i].homeTeam.team_id) {
          var teamData = home;
        } else {
          var teamData = away;
        }

        if (response.api.fixtures[i].goalsHomeTeam > response.api.fixtures[i].goalsAwayTeam && teamData == home) {
          var resultDataPoint = '<div class="datapointgreen datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam > response.api.fixtures[i].goalsAwayTeam && teamData == away) {
          var resultDataPoint = '<div class="datapointred datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam < response.api.fixtures[i].goalsAwayTeam && teamData == away) {
          var resultDataPoint = '<div class="datapointgreen datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam < response.api.fixtures[i].goalsAwayTeam && teamData == home) {
          var resultDataPoint = '<div class="datapointred datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else {
          var resultDataPoint = '<div class="datapointblue datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        }

      // create tooltip container

      var tooltip = $('<table class="tooltip" style="display:none" id="tooltip' + response.api.fixtures[i].fixture_id +
       '"><tr><td>Hometeam</td>' +
        '<td>' + response.api.fixtures[i].goalsAwayTeam + '</td>' +
        '<td>3 (1)</td></tr>' +
        '<tr><td>hometeam</td>' +
        '<td>' + response.api.fixtures[i].goalsHomeTeam + '</td>' +
        '<td>2 (1)</td></tr>' +
        '<tr><td>Venue</td>' +
        '<td>Emirates</td></tr>' +
        '</table>`');

      $('.resultData').append(tooltip);

      $('.resultData').append(resultDataPoint);

      });

一些插图：

可重现的代码sn-p：

$("#id10").hover(
  function() {
    $("#tooltip10").css("display", null);
  },
  function() {
    $("#tooltip10").css("display", "none");
  }
);

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointgreen {
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
}

<body>
  <div id="mainContent">
    <table class="tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
    </table>

    <div class="datapointgreen datapoint" id="id10"></div>

  </div>

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【问题讨论】：

一件事：display 不是元素的属性。它是元素样式的属性。所以你不能使用removeAttr 来删除它。您可以使用css("display", null) 将其设置为空。这会导致在else 分支中滥用css()；它应该是css("display", "none")。见the documentation。
关于问题的其余部分；您确实需要显示运行此代码的 HTML。您可以使用Stack Snippets 为您遇到的问题提供minimal reproducible example。
感谢您指出这一点，我已相应地进行了修复。我还发现在数据点 id 中有一个双 " 包括我也修复了。不过，悬停的任何一方.. 很快就会添加一个可复制的。
@HereticMonkey 我包含了代码 sn-p。抱歉这么晚了。

标签： jquery html css

【解决方案1】：

您的元素是动态渲染的，因此您可以使用 $(document).on("mouseover","element",(){}) 和 $(document).on("mouseleave","element",(){})

您可以简单地使用show() 和hide()（显示和隐藏工具提示）功能，

如下

$(document).ready(function(){
  $(document).on("mouseover","#id10",function() {
      $("#tooltip10").show();
  });
    $(document).on("mouseleave","#id10",function() {
      $("#tooltip10").hide();
  });
})

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointgreen {
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
}

<body>
  <div id="mainContent">
    <div class="datapointgreen datapoint" id="id10"></div>
    <table class="tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
    </table>


  </div>

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

感谢您的意见。在我艰难的环境中仍然没有采取任何行动，嗯。你没有改变css html部分，对吧？ ...即使我强制状态：悬停在开发工具中，工具提示也不会出现。但是当我删除它显示的显示类时，它不是 z-index 问题。
现在可以了。谢谢你。但是你能解释一下为什么显示/隐藏在动态渲染的 DOM 上不起作用的区别吗？
显示/隐藏有效，但 $(element).hover 不适用于动态元素。

【解决方案2】：

我会尝试：

$("#id10").hover(
    function() {
        $("#tooltip10").css("display", "block");
    },
    function() {
        $("#tooltip10").css("display", "none");
    }
);

然后我对你的 CSS 做了一点修正：

#mainContent .resultData .tooltip {
    height: 100px;
    width: 100px;
    position: absolute;
 }

#mainContent .resultData {
    padding-right: 6px;
    padding-left: 3px;
    padding-top: 6px;
    vertical-align: middle;
    float: left;
    z-index: -1;
}

#mainContent .datapointgreen {
    margin-left: 12px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #00DC8E;
}

最后是你的模板：

<body>
  <div id="mainContent">
    <table class="resultData tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
  </table>
  <div class="datapointgreen datapoint" id="id10"></div>

  </div>
</body>

一个工作示例：fiddle

【讨论】：