CODEWITHSUNDEEP
javascriptjquerycsscross-browserhover
triplethreat77
triplethreat77

Reputation: 1296

jQuery hover only works in Internet Explorer

I have an issue with hovers. They work fine in IE, but not Mozilla Firefox or Chrome. I'm guessing it's because it's rather vague, every td but for now that's what I need. Here's the fiddle (not working) http://jsfiddle.net/233qG/ Thanks in advance.

The HTML

<table>
    <tr>
        <td>one</td>
    </tr>
    <tr>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
    </tr>
</table>
<div class="modalPop">Modal Information</div>

The CSS

div.modalPop
{
    display:none;
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
    margin: 280px 50px 0 0;
    z-index: 9999;
}
a.modalPop:hover + div.modalPop
{
    display:block;
}
div.modalPop:hover
{
    display:block;
}

The jQuery

$(document).ready(function(){
    $('td').hover(
      function(){$('.modalPop' + this).stop().hide().fadeIn('slow');},
      function(){$('.modalPop' + this).stop(true, true).fadeOut('slow');}
    );  
});

Upvotes: 0

Views: 186

Answers (2)

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

I think You mean something like this:

$('td').hover(
  function(){$('.modalPop').stop().hide().fadeIn('slow').html("Modal Information : " + $(this).text());},
  function(){$('.modalPop').stop(true, true).fadeOut('slow');}
);

http://jsfiddle.net/233qG/3/

Upvotes: 1

uadnal
uadnal

Reputation: 11425

$('.modalPop' + this) is invalid. this is an object. You are trying to concat a string with an object. Just use $('.modalPop')

If you open on the console(chrome tools or firebug) you should see an error like this:

Uncaught Error: Syntax error, unrecognized expression: .modalPop[object HTMLTableCellElement]

Frankly, I don't see why it is even working in IE. Why are you adding this to the string?

Upvotes: 8

Related Questions