Скрыть один элемент и показать другой при наведении

Question

Скрыть один элемент и показать другой при наведении

0

Я хочу, чтобы первый из двух элементов <i> отображался, когда он не зависал, а другой - скрыт, а при паре я хочу по-другому. Возможно ли это с помощью CSS или мне нужно использовать JS?

<a class="btn btn-like postb2" href="#">
    <i class="sprite-io sprite-like-grey"></i>
    <i class="sprite-io sprite-like-white"></i>
    3
</a>

holyredbeard 20 сен. 2013, в 14:11

Источник

Теги:

html

css

3 ответа

6

.postb2 .sprite-like-grey,
.postb2:hover .sprite-like-white {
    display: none;
}
.postb2:hover .sprite-like-grey {
    display: inline;
}

демонстрация

Вы можете изменить его в соответствии с вашей HTML (кстати. Я не вижу три i в вашем коде)

Jakub Michálek 20 сен. 2013, в 08:57

1

Знайте, что есть уже лучший ответ для вашего дела, но есть кое-что, что я только что узнал о вашем вопросе и комментарий Mr_Green, который может быть полезен.

Вы действительно можете направить сиблинг-элем в CSS с помощью комбинаторов, используя + если элементы расположены рядом друг с другом или ~ если нет (они должны быть в одном и том же родителе).

Маленькая скрипка, чтобы показать

Дополнительная информация о веб-сайте W3C

Aperçu 14 нояб. 2013, в 01:48

Ещё вопросы

Brian Frisch · Accepted Answer · 2013-09-20T09-21-00.000Z

Я думаю, что у меня есть представление о том, чего вы хотите, и на самом деле это возможно в CSS.

Если вы хотите показать другой спрайт при наведении метки привязки, я бы немного поменял разметку.

<a class="btn btn-like postb2" href="#">
    <i class="sprite-io sprite-like"></i>
    3
</a>

Вместо переключения между двумя узлами HTML вы, вероятно, просто захотите изменить координаты того, что нужно показать в вашем CSS-спрайте:

.postb2 .sprite-like{
    background-position: -80px -80px; // just some arbitrary coordinates for example purposes
}

.postb2:hover .sprite-like{
    background-position: -160px -160px;
}

Другое примечание:

Я вижу, что вы используете имена "sprite-like-gray" и "sprite-like-white". Я бы не стал называть мои правила css после того, как они появятся в определенный момент, и вместо этого назовите их после того, что они действительны или выполняются в приложении.