Question

我有一个非常典型的情况，我一直在思考一周。我有一个表，每个td里面都有一个span元素，如下面的HTML所示。点击一个按钮span元素移动并重新排列。我选择将span放在td中，因为它更容易使用span来生成动画移动tds。

一切正常，除非我想对这些跨度产生徘徊效应，这是我无法实现的。我已经尝试过所有css解决方案stackoverflow或google必须提供，但似乎都没有。

最初所有的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（trasitional animation）：

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

如果要平滑悬停效果，请使用transition属性。

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事件是什么？

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

1 个答案: