將鼠標懸停在未排序列表中的第一個列表項上時顯示文本

Question

如果我在頁面中有ul和一些隱藏文本，那麼當用戶將鼠標懸停在ul中的第一個li上時，如何顯示該文本？

我不在乎如果這是在CSS或JS中，文本只有在懸停在列表中的第一個itel而沒有其他人時纔會出現。所以，當我將鼠標懸停在咖啡，「隱藏文本」可見

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<label style="display: none">hidden text</label>

Answer 1

您可以使用:first選擇或first()過濾器以查找元素的集合中的第1個要素。

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

實施例：https://jsfiddle.net/g6Lo4835/

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

實施例：https://jsfiddle.net/g6Lo4835/1/

Answer 2

$(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'); 
     } 
    } 
    }); 
}); 

的jsfiddle Here。

我只是簡單地向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'); 
     } 
    } 
    }); 

您可以添加此更新顯示爲無鼠標移開時，它只會修改它，如果它是第一個li元素。

Answer 3

解普通的JavaScript：

var first = document.getElementsByTagName('li')[0]; 
 
var label = document.getElementsByTagName('label')[0]; 
 

 
first.onmouseover = function(){ 
 
    label.style.display = 'block'; 
 
} 
 

 
first.onmouseout = function(){ 
 
    label.style.display = 'none'; 
 
}

<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Milk</li> 
 
</ul> 
 

 
<label style="display: none">hidden text</label>