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

周围＆＃39; bbb＆＃39;使用span修复了问题：

＆＃13;

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

＆＃13;

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

＆＃13;

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

有趣的行为。我试图添加此内容，<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd" > <suite name="test" verbose="10"> <parameter name="component" value="run" /> <parameter name="testtype" value="sanity" /> <listeners> <listener class-name="class" /> </listeners> <test name="testa" time-out="5400000"> <classes> <class name="classa " /> </classes> </test> <test name="testb" time-out="3600000"> <classes> <class name="classb"/> </classes> </test> <test name="testc" > <classes> <class name="classc" /> </classes> </test> <test name="testd"> <classes> <class name="classdd> </class> </classes> </test> </suite>的文本部分正在显示。

aaa

Chrome隐藏不应影响的元素

4 个答案: