javascript - 将鼠标悬停在表格上以使用 jquery 更改另一个元素样式，仅工作 100 万秒

Question

我希望在将鼠标悬停在特定表格的任何区域时为文本添加下划线。

这是我的代码，它可以工作，但只有 100 万秒，然后即使光标在表格内，下划线也会消失(尝试了 go 和 foo 到测试):

JS:

<script>
$(document).ready(function(){
$(function(){
    $('.foo').mouseenter(function(){
        $(".vvv").addClass('altbg')
    }).mouseout(function(){
        $(".vvv").removeClass('altbg')
    });
});
})
</script>

CSS:

.altbg {
    text-decoration:underline;
}

HTML:

<div class="go">
<table border="1" class="foo">
        <col style="width:115px;" />
        <col style="width:280px;" />
        <col style="width:125px;" />
        <col style="width:145px;" />
        <col style="width:125px;" />
        <col style="width:230px;" />
          <tr>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr></table>
</div>
<div class="vvv">Hello</div>  

编辑:第二个相关问题:

我希望在悬停表格时更改文本颜色，即使该颜色已由 ID 定义。

除了将 ID 更改为类之外，我怎样才能让这个 div 更改它的颜色？

也许需要更改脚本中的某些内容以便为选择器指定类，但我不知道该怎么做。

JS:

<script>
$(document).ready(function(){
$(function(){
    $('td').mouseenter(function(){
        $(".vvv").addClass('altbg')
    }).mouseout(function(){
        $(".vvv").removeClass('altbg')
    });
});
})
</script>

CSS:

#meh {color:red}

.altbg {
    text-decoration:underline;
    color:blue;
}

HTML:

<div class="go">
<table border="1" class="foo">
        <col style="width:115px;" />
        <col style="width:280px;" />
        <col style="width:125px;" />
        <col style="width:145px;" />
        <col style="width:125px;" />
        <col style="width:230px;" />
          <tr>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
          </tr></table>
</div>
<div id="meh" class="vvv">Hello</div>    

Answer 1

不是悬停的时间，而是鼠标的位置让它不再出现。由于某些原因，以 table 的类为目标将不起作用，您必须以其中的 td 元素为目标:

$(document).ready(function () {
    $(function () {
        $('td').mouseenter(function () {
            $(".vvv").addClass('altbg')
        }).mouseout(function () {
            $(".vvv").removeClass('altbg')
        });
    });
})

.altbg {
    text-decoration:underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="go">
    <table border="1" class="foo">
        <col style="width:115px;" />
        <col style="width:280px;" />
        <col style="width:125px;" />
        <col style="width:145px;" />
        <col style="width:125px;" />
        <col style="width:230px;" />
        <tr>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</div>
<div class="vvv">Hello</div>

这是一个 jsfiddle 演示:http://jsfiddle.net/0uqboeat/也是。