鉻元素隱藏，不應該影響我的問題

Question

Here's a fiddle，並且如果代碼段無法正常工作：

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

當我徘徊了DIV，的文本部分鏈接aaa消失。出於某種原因，我變成了:hover{visibility:visible}。
它與元素ID或文本或鏈接無關。
這是Chrome的問題，Firefox的工作原理應該如此。

這是一個bug還是它是一個js問題？爲什麼Chrome會這樣做？

Answer 1

有趣的行爲。我試圖添加這個，並且顯示aaa的文本部分。

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

Answer 2

嘗試使用此：

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

Answer 3

周邊 'BBB' 與span修復該問題：方法之後

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

Answer 4

用戶解決這一問題

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