Question :
I want to hover the mouse over a li
, the result will appear in div
Placing the mouse on Son 2:
example: Parent 1 > Son 2
Or in Father 2:
Father 2
<li ><a href="#estaEm">Pai 1</a>
<ul>
<li ><a href="#estaEm" >Filho 1</a></li>
<li ><a href="#estaEm" >Filho 2</a></li>
</ul>
</li>
<li ><a href="#estaEm">Pai 2</a>
<ul>
<li><a href="#estaEm" >Filho 1</a></li>
</ul>
</li>
</div>
<div id="estaEm" value ="">resultado </div>
The jQuery I made does not work if only Father 2 appears:
$( "li" ).bind( "mouseover", function() {
var result=''
$( this ).find("a").each(function () {
result += " > " + $( this ).text()
});
$("#estaEm").text(result)
});
Answer :
Use $('li > a')
as a selector in jQuery to pick up the child (s) from li and use this
and get the text from the li
that the mouse passed, simple.
See:
$('li > a').mouseover(function() {
$('#estaEm').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><ahref="#estaEm" >Filho 1</a></li>
<li ><a href="#estaEm" >Filho 2</a></li>
</ul>
</li>
<li >
<a href="#estaEm">Pai 2</a>
<ul>
<li><a href="#estaEm" >Filho 1</a></li>
</ul>
</li>
</div>
<div id="estaEm" value ="">resultado </div>