Html 使用CSS设置箭头的永久位置，而不影响表格单元格中的文本对齐

我有一个HTML表，如：

<div>
    <table border="1">
        <thead>
            <tr class="example">
                <th>
                    <span id="item1">
                      <span>Value1</span>
                      <span class="sort-up no-display">&nbsp;</span>
                    </span>
                </th>
                <th>
                    <span id="item2">
                       <span>Value2</span>
                       <span class="sort-up no-display">&nbsp;</span>
                    </span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Example 1</td>
                <td>Example 2</td>
            </tr>
            <tr>
                <td>Example 3</td>
                <td>Example 4</td>
            </tr>
        </tbody>
   </table>
</div>

价值1
价值2
例1
例2
例3
例4

在标题中，我有一个隐藏的向上箭头，它在使用jquery的mouseover/mouseout时出现

<script type="text/javascript">
      $(function(){
            $(".example th").on("mouseover mouseout", function(){
               var $sort_up = $(this).children().find("span").first().next();

                $sort_up.toggleClass("no-display");
            });
      });

</script>

$（函数（）{
$（“.example th”）.on（“mouseover mouseout”，function（）{
var$sort_up=$（this.children（）.find（“span”）.first（）.next（）；
$sort_.toggleClass（“无显示”）；
});
});

其中

no display

是

display:none

css

截图（之前）

及之后：

我不希望在mouseover/mouseout事件中移动标题

怎么做？也许这是一个CSS技巧

PS：也许像：

感谢您对我的耐心，因为我对CSS没有更多的了解。

进行这些更改

<span id="Val">Value2</span>
#Val{position:absolute;} Add top and left as per your need.

Value2
#Val{position:absolute；}根据需要添加顶部和左侧。

---

现在，即使您的箭头出现，它也会被修复。

使用CSS属性将其移出；或者。

我不完全清楚为什么要使用图像创建箭头，这会导致对齐问题；如果使用

text（）

创建一个文本箭头，即声名狼藉的unicode向上三角形，则对齐将保持自身：

$('.example th').on('mouseover mouseout',
                     function(e){
                         var evt = e.type,
                             sort = $(this).find('span:last');
                         if (evt == 'mouseover'){
                             sort.text('▲');
                         }
                         else if (evt == 'mouseout') {
                             sort.text('');
                         }
                     });​

---

.

使用文本元素以外的其他元素可能有成千上万的原因（即使这仍然是一个良好的实践）…可能有，也有，但没有解释为什么我仍然“不确定”。我不打算对使用图像的有效性打折扣，但这样做似乎不必要地复杂，“DavidThomas，考虑到这会导致使用文本可以避免的问题，我在这篇文章中使用了ASCII码，用于五星评级系统。它服务于它的目的没有CSS引导好！