jquery - 在传统动画之后使 span 元素具有固定宽度

Question

我有一个非常典型的情况，我已经思考了一个多星期了。 我有一个表，每个 td 内部都有一个 span 元素，如下面的 HTML 所示。单击按钮 span 元素四处移动并重新排列它们自己。我选择将 span 放在 td 中，因为它更容易使用 span 来制作动画移动 tds。

一切正常，除了我想对这些跨度产生悬停效果，这是我无法实现的。我已经尝试了 stackoverflow 或 google 必须提供的所有 css 解决方案，但似乎都不起作用。

最初所有 span 元素都在 tds 中居中，但在动画移动后不再居中。

感谢任何 css 或 html 或 jquery 方式的帮助!!1

HTML:

<tr>
    <td><span id = "14">45</span></td>
    <td><span id = "15">1</span></td>
    <td><span id = "16">16</span></td>
    <td><span id = "17">10</span></td>
    <td><span id = "18">8</span></td>
    <td><span id = "19">19</span></td>
    <td><span id = "20">25</span></td>
</tr>

<tr>
    <td><span id = "21">45</span></td>
    <td><span id = "22">9</span></td>
    <td><span id = "23">3</span></td>
    <td><span id = "24">23</span></td>
    <td><span id = "25">30</span></td>
    <td><span id = "26">5</span></td>
    <td><span id = "27">7</span></td>
</tr> 

CSS:

span {
    color: #3a3b36;
    font-size: 15px;
    /*display: inline;
      width: 82px;
      height: inherit;
      line-height: 100%;*/
}

td {
    vertical-align: middle;
    border: 1px solid black;
    text-align: center;
}

Javascript(传统动画):

for(i = 0; i < pos.length; i++){                  
     $('#' + i).css({
         position: 'absolute',
         top: pos[i].top,
         left: pos[i].left,   
     });              
 } //for loop ends

Answer 1

关于您的问题对跨度有悬停效果，如果您需要简单的效果，您可以使用 css 属性 :hover。 下面的代码将以红色显示悬停的跨度

td span:hover {
  background-color:red;
}

如果你想平滑悬停效果，请使用过渡属性。

td {
    vertical-align: middle;
    border: 1px solid black;
    text-align: center;
    transition: all 1s;
}
td:hover {
  background-color:red;
  transition: all 1s;
}

顺便说一句，你可以用 jquery 来管理它:

$( "span" ).hover(
  function() {
  $(this).css("background-color","red");
},function() {
  $(this ).css("background-color","white");
}
);

第一个函数是鼠标悬停处理程序，第二个函数是鼠标离开处理程序。

关于你的其他问题，我需要更多地了解你的目标，你的 onClick 事件是什么？