CODEWITHSUNDEEP
javascriptcssgoogle-chromehidden
Qiao
Qiao

Reputation: 17049

Chrome hides element that shouldn't be effected

Here's a fiddle of my problem, and a code snippet in case that doesn't 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>

When I hover out of div, Text part of the link aaa disappears. I becomes :hover{visibility:visible} for some reason.
It has nothing to do with elements ids or text or links.
It is Chrome problem, Firefox works as should.

Is it a bug or it is a js problem here? Why does Chrome do that?

Upvotes: 4

Views: 113

Answers (4)

perseusl
perseusl

Reputation: 348

Try using this:

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

Upvotes: 1

NITIN PATEL
NITIN PATEL

Reputation: 460

user after method to solve this problem

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

Upvotes: 2

jaunt
jaunt

Reputation: 5079

Surrounding 'bbb' with span fixes 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>

Upvotes: 2

Josip Ivic
Josip Ivic

Reputation: 3709

Interesting behaviour. I've tried to add this, and text part of aaa is showing. 

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

Upvotes: 0

Related Questions