Question

我有一个简单的有序列表：

<ol>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>

我正在使用jQuery创建一个可排序的列表，您可以在其中拖放以重新排序列表中的项目。但我也希望用户能够通过单击“x”图标来删除列表项，其中有序列表编号通常位于悬停状态。右侧已经被“移动”图标（三条水平线）使用。

如果我徘徊在列表项目2上，我希望看到：

1. one
X  two     =
3. three

我需要将{2替换为X并且可以点击。

（注意：上面的=用于表示移动悬停图标，通常是三条水平线。）

Answer 1

问题是你将无法将有序列表更改为无序列表（只需将数字交换为X即可）。

而是有一个无序列表，其中数字在span标签中布局，我们可以换出X（图像/任何你想要的）。这样就很容易将删除事件绑定到它上面了！

css ul li {list-style-type：none; }

<ul>
    <li><span>1.</span> one</li>
    <li><span>2.</span> two</li>
    <li><span>3.</span> three</li>
</ul>

jsFiddle DEMO

$('ul li').each(function () { 
    var this$ = $(this),
        _old = $(this).find('span').text();

    this$.on({
        mouseover: function () {
            this$.find('span').text('X');
        }, 
        mouseout: function () {
            this$.find('span').text(_old);
        }
    });

    this$.find('span').on('click', function () {
         if ( $(this).text() === 'X') {
            if (confirm('Are you sure you want to Delete?')) {
                $(this).closest('li').remove();
            }
        }
    });
});

Answer 2

你可以把你的图标放在一个范围内并绝对定位它。然后只需在LI悬停时显示它。

http://jsfiddle.net/S3Ph8/1/

Answer 3

您可以创建一个新的css类来删除项目

li.remove
{
 background-image: url(remove.gif);
 background-repeat: no-repeat;
 background-position: 0 50%;
 padding: 3px 0 3px 20px;
 margin: .4em 0;
}

然后创建一个悬停事件处理程序，将该类添加到突出显示的li

$('ul li').on('hover', function (){
  $(this).toggleClass('remove');
}).on('click', function(){
   alert($(this).text());    
//take some action
})

这是为了给你一个粗略的想法，你需要根据你的要求进行调整，当然还有一个实际的gif

Answer 4

有三种方法可以将图像用作列表项目符号：

使用list-style-image替换:hover上的项目符号。这种方法的弱点在于图像无法真正定位，并且受图像尺寸的限制。

http://jsfiddle.net/bnickel/tCTwJ/
```
li:hover {
    list-style-image: url(x.png);
}
```

使用list-style-type: none隐藏项目符号并使用:before伪元素放置图像。这不适用于IE7。

http://jsfiddle.net/bnickel/LVsYW/

li {
    position: relative;
}

li:hover {
    list-style-type: none;
}

li:hover:before {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: -55px;
    background-image: url(x.png);
}

与2类似，您可以仔细调整元素的边距和填充，并在其中放置非重复的背景图像。这可能是最可靠的方法，但它会将您置于一组非常具体的风格中。

http://jsfiddle.net/bnickel/LXe4C/
```
li:hover {
    list-style-type: none;
    background-image: url(x.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    margin-left: -55px;
    padding-left: 55px;
}
```

如何在悬停时用图标替换有序列表编号？

4 个答案: