I want that when passing the mouse for a Li, the result appears in the DIV

Question

I want that by passing the mouse by a li, the result appears in div

placing the mouse on the Son 2: example: Father 1 > Son 2

or in the 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 doesn’t work in case only Father 2 appears:

$( "li" ).bind( "mouseover", function() {
    var result=''

    $( this ).find("a").each(function () {
        result += " > " + $( this ).text()
    });

    $("#estaEm").text(result)
}); 

Answer 1

Use $('li > a') as selector in jQuery to catch the child(s) from li and use this and take the text from li that the mouse passed, it is quite simple.

Behold:

$('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 ><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>