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

Question

我有一个 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>

在标题中，我有一个隐藏的向上箭头，它在使用 jquery 进行鼠标悬停/鼠标移出时出现

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

no-display 是 display:none css。

屏幕截图(之前)

之后:

我希望在鼠标悬停/鼠标移出事件时不移动标题标题。

怎么做？也许是 CSS 技巧。

PS:可能喜欢:

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

Answer 1

我不完全确定您为什么要使用图像来创建箭头，这会导致对齐问题；如果您使用 text() 创建一个文本箭头，臭名昭著的 unicode 向上指向三 Angular 形，那么对齐将自行保持:

$('.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('');
                         }
                     });​

JS Fiddle demo .