我有一个 HTML 表格:
<div>
<table border="1">
<thead>
<tr class="example">
<th>
<span id="item1">
<span>Value1</span>
<span class="sort-up no-display"> </span>
</span>
</th>
<th>
<span id="item2">
<span>Value2</span>
<span class="sort-up no-display"> </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 没有更多的了解。
最佳答案
我不完全确定您为什么要使用图像来创建箭头,这会导致对齐问题;如果您使用 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('');
}
});
关于html - 使用 CSS 设置箭头的永久位置,而不影响表格单元格中的文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11309901/