Отображение значка «закрыть» при наведении - PullRequest
Новая
       20

Отображение значка «закрыть» при наведении

5 голосов
/ 30 июля 2011

У меня есть новостная лента, которая, очевидно, организована. Когда пользователь наводит курсор на каждый из элементов, фон подсвечивается. Я также хотел бы иметь маленькую букву «х» в правом верхнем углу каждого элемента, которая отображается только при наведении курсора. Эта буква "x" будет кнопкой удаления, чтобы удалить это сообщение.

Прямо сейчас у меня есть несколько основных HTML-заявлений: <div class="hide-button"><a href="#">x</a></div>

Я знаю, что я не хочу, чтобы "х" отображался в html, а скорее имел его в CSS. Итак, у меня есть <li> css ниже для зависания, а также CSS для кнопки скрытия. Я хотел бы знать лучший способ интегрировать div кнопки скрытия в <li>

.hide-button {
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: gray;
}

.hide-button a{
    text-decoration: none;
    color:gray;
}

.hide-button a:hover {
    text-decoration: underline;
    color:gray;
}

и список: 

.newsfeedlist li {
    background: white;
    border-bottom: 1px solid #E4E4E4;
    padding: 12px 0px 12px 0px;
    overflow: hidden;
}

.newsfeedlist li:hover {
    background-color: #F3F3F3;
}

Спасибо большое !!!!!

Ответы [ 3 ]

9 голосов
/ 30 июля 2011

Предполагая, что ваши кнопки удаления находятся внутри другого контейнера, вы можете сделать что-то вроде 

.hide-button {
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: tray;
    display: none;
}

... the other bits of CSS ...

.newsfeedlist li:hover .hide-button {
    display: block;
}

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

Надеюсь, это имеет смысл

Тим

1 голос
/ 16 мая 2012

Возможно, вам действительно нужно это: Демонстрация на jsFiddle.net Я изменил пример и увеличил его для нескольких областей содержимого или изображений.

1 голос
/ 30 июля 2011

Но hide-button элемент в li и сделать 

.newsfeedlist li:hover .hide-button {
    display: inline-block;
}

и добавьте display: none; к .hide-button

В противном случае, всегда есть JavaScript.

...