javascript - JQuery/Javascript - ".click()"方法不完全有效？

Question

我首先有一个带有空 div 的表格，然后使用 Javascript 和 JQuery，我创建了一个作品数组，数组中的任何单词，我都将这些单词放入 td 中。这是我的 html:

<div id="sideBar">
 <table id="sideTable">
        <tr><td id='row0'></td></tr>
        <tr><td id='row1'></td></tr>
        <tr><td id='row2'></td></tr>
        <tr><td id='row3'></td></tr>
        <tr><td id='row4'></td></tr>
        <tr><td id='row5'></td></tr>
        <tr><td id='row6'></td></tr>
        <tr><td id='row7'></td></tr>
        <tr><td id='row8'></td></tr>
    </table>
</div>

和我的 Javascript 数组，如果是这样的话

var tableHeadings = ['headingOne', 'headingTwo', 'headingThree'];

然后Javascript 将隐藏#row3 到#row8，三个标题将分别输入到#row0、#row1 和#row2。 td 取行中最长 td 的大小。这部分代码有效!我还有两个 Javascript 函数，一个用于悬停在 td 上，另一个用于当您单击 td 时。将鼠标悬停在 td 上的那个，Javascript 是这样开始的

$('#sideTable td').hover(

在你点击 td 的地方，Javascript 是这样开始的

$('#sideTable td').click( function() {

问题是当你悬停在单词上时，悬停功能是完美的，但是当我去点击td时，即使td的宽度真的很长/td里面有很多信息(说td里面的信息太长了，td的宽度变成了200px)，它只允许你点击第一个我认为是td的85px。这太奇怪了。即使我这样做

#sideBar td {
    width: 120px;
}

并使每个 td 的宽度为 120px，它仍然只允许我单击 td 的前 85px。悬停是完美的，当我悬停在 td 上时，无论我悬停在哪里(无论它是否在 td 的前 85px 内)并且无论 td 有多长，悬停功能都可以正常工作并执行.然而，出于某种原因，点击功能只允许我点击标题的前 85px 左右。这是为什么？

注意:即使我尝试像这样使用 Javascript 设置 td 的宽度

$('td').css('width','200');

它仍然只允许我点击 td 的前 85px。如果我将鼠标悬停在 td 的其余 115px 上，光标甚至不会变为指针。由于某种原因，它不承认那里有一个 td。

CSS 是这样的

    #sideBar td {
    font-size: 12px;
}

#sideBar {
    position: absolute;
    top: 90px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

另请注意，我使用的是 I.E8 而不是 CSS3，而且我写了很多 JS，它们非常困惑，所以如果我上传它，这个帖子会被否决。 JS 并没有真正影响 TD 的宽度或任何东西，它只是“如果 td 悬停，然后执行所有这些，如果 td 被单击，则执行此操作”。问题不在于 JS 代码，只是“如果点击 td”仅适用于 td 的前 85px 左右，而不管 td 是否长于此。

Answer 1

尝试编辑您的 CSS 来处理溢出:

overflow-wrap: break-word
overflow-x: visible

听起来像是 CSS 问题而不是 jquery 问题。检查元素并查看鼠标是否覆盖了 td 的整个宽度。