0

我正在尝试使用删除按钮制作 li 元素,但我找不到解决方案

我想要的是:

在此处输入图像描述

这里红色矩形是删除按钮

html 正在尝试的是:

 <li id="liRightDescriptions">
    <span>
    Descriptions
    <img src="../Images/RemoveButton.ico">
    </span>
    </li>

更多:我需要在 MouseOver 上显示删除按钮,当我点击那里时 jquery 查询事件应该被触发,并且在文本上也是,

所以我想,我不想将删除图像设置为背景

这是我的 html:http: //jsfiddle.net/2h78A/

4

3 回答 3

1

HTML(可以用任何文本或图像替换跨度中的 x)

<ul>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
</ul>

CSS

ul{
    width:160px;
}
li{
    position:relative;
    padding:5px 10px;
    background:#ccc;
    border-radius:3px;
    margin:3px;
}
li:hover span{display:block;}
li span{
    display:none;
    padding:3px;
    line-height:8px;
    cursor:pointer;
    position:absolute;
    right:0px;
    top:0px;
}
于 2013-02-22T17:37:41.370 回答
0

对于按钮位置使用:

.removeImg {
    float: right;
}

或者

.liRightDescriptions span {
    position: relative;
}

.removeImg {
    position: absolute;
    top: 0;
    right: 0;
}

在悬停时显示/隐藏:

$('.liRightDescriptions').hover(function() {
    $('.removeImg').fadeIn(500);
}, function() {
    $('.removeImg').fadeOut(500);
});

要隐藏li点击:

$('.removeImg').click(function() {
    $(this).parent('.liRightDescriptions').hide(500);
    /* you could also remove the element altogether here if needed */
});

请注意,您应该使用类而不是 id,因为元素不是唯一的。

于 2013-02-22T17:02:34.493 回答
-1
black-square {
position: relative
}

delete-img { 
position:absolute;
top:2px;
right: 2px;
}
于 2013-02-22T17:03:36.370 回答