0

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

CSSno-display在哪里。display:none

截图（之前）

在此处输入图像描述

之后：

在此处输入图像描述

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

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

PS：也许像：

在此处输入图像描述

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

4

3 回答 3

1

我不完全确定您为什么要使用图像来创建箭头，这会导致对齐问题；如果您使用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('');
                         }
                     });​

JS 小提琴演示。

于 2012-07-03T11:35:23.967 回答
0

进行这些更改

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

现在，即使您的箭头出现，它也会保持固定。

于 2012-07-03T11:27:14.467 回答
0

使用 CSS 属性将其从html 流中取出；要么position: absolute要么float: right。

于 2012-07-03T11:31:16.433 回答