最初のリスト項目の上にマウスポインタを置いたときにテキストを表示

Question

ulの中にliがあり、ページに隠れたテキストがある場合、ユーザーが最初のliをulの上に置いたときにそのテキストを表示するにはどうすればよいですか？

これがCSSかJSであるかどうかは気にしませんが、テキストはリスト内の最初のitelをホバーするときだけ表示され、他のものは表示されません。私はコーヒーの上に置くとそう、「隠しテキストは、」あなたは要素のコレクションでは第一の要素を見つけるために:firstセレクタやfirst()フィルタを使用することができ

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

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

Answer 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を更新して非表示のテキストを表示します。

はあなたがマウスアウトでnoneに表示を更新するには、これを追加することができ、それが最初のli要素である場合にのみ、それを修正します

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

を更新しました。プレーンなJavaScriptを使用して

Answer 3

ソリューション：

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>