Как установить кнопку удаления в элементе li справа вверху?

я пытаюсь сделать Lī элемент с удаления кнопки, но я не смог найти решенияКак установить кнопку удаления в элементе li справа вверху?

хотят я хочу это:

enter image description here

здесь красный прямоугольник кнопки

удалить html, то, что вы пытаетесь:

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

Больше: мне нужно показать удаления кнопки на MouseOver и когда я щелкаю JQuery событие запрос должен уволят, и на текст также,

так что я думаю, я не хочу, чтобы установить удалить изображение в качестве фона

Это мой HTML: http://jsfiddle.net/2h78A/

источник

2013-02-22 vir

Для использования кнопки позиции:

.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 */ 
});

Примечание вы должны использовать классы, а не идентификаторы в качестве элементов не являются уникальными.

источник

2013-02-22 17:02:34

Вы могли бы сделать это без JS. '#liRightDescriptions img {display: none; } 'then' #liRightDescriptions: hover img {display: block; } ' – JConstantine

Прост в использовании JS, так как они также хотят скрыть его при нажатии –

http://jsfiddle.net/2h78A/ – vir

-1

black-square { 
position: relative 
} 

delete-img { 
position:absolute; 
top:2px; 
right: 2px; 
}

источник

2013-02-22 17:03:36

'black-square' и' delete-img' не являются допустимыми CSS-селекторами. –

И вот почему вы положили -1? Пользователь может адаптировать селектор как «черный квадрат», а «delete-img» - довольно очевидные элементы страницы, если вы смотрите на предоставленное изображение. –

Также факт, что вы указываете 'left: 2px;' и 'right: 2px;', который вместе означают, что ваш код не отвечает на вопрос правильно. –

HTML (можно заменить х в промежутке с любым текстом или изображением)

<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-22 17:37:41

Как установить кнопку удаления в элементе li справа вверху?

ответ

Смежные вопросы