Javascript 将鼠标悬停在未排序列表中的第一个列表项上时显示文本

如果我在ul中有一个li，在页面上有一些隐藏文本，那么当用户将鼠标悬停在ul中的第一个li上时，如何显示该文本

我不在乎这是在CSS还是JS中，文本只需在列表中的第一个itel上悬停时显示，而不必显示其他文本。所以当我把鼠标悬停在咖啡上时，“隐藏文本”是可见的

咖啡
茶
牛奶

隐藏文本

您可以使用

:first

选择器或

first（）

过滤器来定位元素集合中的第一个元素

$('ul li:first').hover(function()
{
  $('label').show();
}, function()
{
$('label').hide();
});

例如：

例如：

JSFiddle

我只是简单地向ul元素添加了一个事件侦听器，并检查了li元素的索引，如果它是0，那么它将更新css并显示隐藏的文本

已更新

  $ul_menu.on('mouseout', function(e){
     if(e.target && e.target.nodeName === 'LI'){
        if($(e.target).index() === 0){
        $label.css('display', 'none');
      }
    }
  });

---

您可以添加此选项以在mouseout中将显示更新为none，并且仅当它是第一个li元素时，才会对其进行修改。

纯javascript解决方案：

var first=document.getElementsByTagName（'li'）[0]；
var label=document.getElementsByTagName（'label'）[0]；
first.onmouseover=函数（）{
label.style.display='block'；
}
first.onmouseout=函数（）{
label.style.display='none'；
}

咖啡
茶
牛奶

隐藏文本

$(document).ready(function(){
  var $ul_menu = $('ul');

  $ul_menu.on('mouseover', function(e){
    if(e.target && e.target.nodeName === 'LI'){
      if($(e.target).index() === 0){
        $('label').css('display', 'initial');
      }
    }
  });
});

  $ul_menu.on('mouseout', function(e){
     if(e.target && e.target.nodeName === 'LI'){
        if($(e.target).index() === 0){
        $label.css('display', 'none');
      }
    }
  });