jQuery hover 仅适用于 Internet Explorer答案

【问题标题】：jQuery hover only works in Internet ExplorerjQuery hover 仅适用于 Internet Explorer
【发布时间】：2013-02-13 00:15:44
【问题描述】：

我对悬停有疑问。它们在 IE 中运行良好，但不能在 Mozilla Firefox 或 Chrome 中运行。我猜这是因为它相当模糊，每个 td 但现在这就是我需要的。这是小提琴（不工作）http://jsfiddle.net/233qG/ 在此先感谢。

HTML

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

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

jQuery

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

【问题讨论】：

$('.modalPop' + this) ???将元素添加到字符串。我很惊讶它可以在任何地方工作？
我没有看到 a.modalPop 元素...
您是否查看过控制台错误？

标签： javascript jquery css cross-browser hover

【解决方案1】：

$('.modalPop' + this) 无效。 this 是一个对象。您正在尝试将字符串与对象连接起来。只需使用$('.modalPop')

如果您在控制台（chrome 工具或 firebug）上打开，您应该会看到如下错误：

未捕获的错误：语法错误，无法识别的表达式：.modalPop[object HTMLTableCellElement]

坦率地说，我不明白为什么它甚至可以在 IE 中运行。为什么要在字符串中添加this？

【讨论】：

【解决方案2】：

我认为你的意思是这样的：

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

【讨论】：