javascript - 将鼠标悬停在动态创建的列表上

Question

我有一个菜单，其中包含使用 javascript 动态创建的项目列表。
它们具有使用 setAttribute 创建的不同颜色和国家/地区属性。

$("#menuList a").hover(
  function() {
    var countryName = $(this).attr('country');
    var fruitColour = $(this).attr('colour');
    $('#toshow').append($("countryName \n fruitColour"));
  },
  function() {}
);

.toshow {
  display: none;
}

#menuList a:hover div.toshow {
  top: 0;
  right: 0;
  display: block;
  position: absolute;
  z-index: 99999;
  background: red;
  width: 200px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
  <li><a href="#" country="US" colour="green">Watermelon</a></li>
  <li><a href="#" country="Australia" colour="green">Grapes</a></li>
  <li><a href="#" country="null" colour="null">Strawberry</a></li>
  <li><a href="#" country="null" colour="null">Blueberry</a></li>
</ul>


<div class="toshow" id="toshow"></div>

在这里，我想要一个单独的隐藏 div(显示在页面右上角或菜单列表旁边)，直到 <a> 中的任何一个都没有任何内容。标签被悬停，并显示其响应的两个属性，直到不再有鼠标悬停。

代码没有错误。但当鼠标悬停在列表上时，我没有看到任何红色的东西。是否有可能实现我想要的目标？

Answer 1

您可以使用mouseout隐藏 toshow div 的事件 hide当您离开列表元素时。并且在每个 hover事件，您可以将 toshow 的 html 更改为用户悬停在其上的 li 元素的值并使用 show显示它。

另外，请确保在插入动态生成的列表的 html 之后附加事件处理程序。:

function displayGeneratedList() {
  $('#menuList').html(`
    <li><a href="#" country="US" colour="green">Watermelon</a></li>
    <li><a href="#" country="Australia" colour="green">Grapes</a></li>
    <li><a href="#" country="null" colour="null">Strawberry</a></li>
    <li><a href="#" country="null" colour="null">Blueberry</a></li>
  `);
  $("#menuList a").hover(function() {
    var countryName = $(this).attr('country');
    var fruitColour = $(this).attr('colour');
    $('#toshow').html(`${countryName}<br>${fruitColour}`).show();
  });
  $('#menuList a').mouseout(function() {
    $('#toshow').hide();
  });
}

$(document).ready(function() {
  displayGeneratedList();
});

#menuList {
  display: inline-block;
}

.toshow {
  display: none;
  float: right;
  background: maroon;
  width: 200px;
  height: 100px;
  padding: 5px;
  color: white
}

<ul class="menubar" id="menuList">
</ul>

<div class="toshow" id="toshow"></div>

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