Chrome hides an item that should not be executed

Question

Here is the scenario of my problem and a piece of code in case this does not work:

$(function() {
  $('div').hover(
    function() {
      $(this).append("<div id='xxx'>ccc</div>")
    },
    function() {
      $('#xxx').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>
        <a href="xxx">
          <img src="xxx">aaa
        </a>
        bbb
      </div>
    </td>
  </tr>
</table>

Run codeHide result

When I exit the div, the text part of the link aaa disappears . For some reason, I become :hover{visibility:visible}. It has nothing to do with ids elements or text or links.
This is a Chrome issue, Firefox is working as it should.

Is this a bug or is the js problem here? Why is Chrome doing this?

Answer 1

The "bbb" environment using spanfixes the problem:

$(function() {
  $('div').hover(
    function() {
      $(this).append("<div id='xxx'>ccc</div>")
    },
    function() {
      $('#xxx').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>
        <a href="xxx">
          <img src="xxx">aaa
        </a>
        <span>bbb</span>
      </div>
    </td>
  </tr>
</table>

Run codeHide result

Answer 2

<script>
$('div').hover(
    function() {
        $(this).after("<div id='xxx'>ccc</div>")
    },
    function() {
        $('#xxx').remove();
    }
);
</script>

Answer 3

:

$('div').hover(
    function() {
        $(this).parent().append("<div id='xxx'>ccc</div>");
    },
    function() {
        $('#xxx').remove();
    }
);

Answer 4

. , aaa.

function(){
        $(this).clearfix:after {
        /* visibility: hidden; */}}