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

时间:2018-12-01 16:25:31

标签: javascript jquery

我有一个菜单,其中包含使用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(显示在页面的右上角,或者在menuList旁边),直到所有<a>标记都悬停之前,它都没有任何内容,并显示其响应两个属性,直到不再将鼠标悬停为止。

代码没有错误。但是当鼠标悬停在列表上时,我看不到红色的任何内容。是否有可能实现我的期望?

1 个答案:

答案 0 :(得分:1)

您可以使用mouseout事件在离开列表元素时用hide隐藏toshow div。并且在每个hover事件中,您可以将toshow的html更改为用户将鼠标悬停在li元素上的值,并使用show进行显示。 / p>

还要确保在插入动态生成的列表的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>