Изменение формы и цвета стрелки внутри кнопки при наведении

Question

Изменение формы и цвета стрелки внутри кнопки при наведении

0

Я работаю над кнопкой, вот демо. Прямо сейчас я застрял в двух проблемах, я не могу понять, как их решить.

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

Я еще не изучил javascript, поэтому мне интересно, возможно ли это с помощью CSS?

Вторая проблема: вы также можете увидеть, что я добавил красный цвет при наведении курсора, но стрелки не меняют цвет при зависании. Стрелки изменяют только цвет, если вы наведите указатель мыши на стрелки

Можно ли каким-либо образом изменить цвет текста и стрелки одновременно при падении?

Заранее спасибо.

Nohman 22 март 2014, в 16:52

Источник

Теги:

html

css

button

hover

icons

2 ответа

1

1) Вы должны указать стрелке вниз, чтобы скрыть наведение.

.language-icon:hover .arrow-down { display: none; }

2) Вы говорите стрелке при наведении, чтобы она была черной. Вы должны сказать, что это другой цвет.

.language-icon:hover .arrow-up { border-bottom: 5px solid #d13030; }

Надеюсь, это поможет.

robbclarke 22 март 2014, в 14:12

0

Я обновил демо с вашим кодом, стрелки теперь меняются при зависании, спасибо, но цвет стрелок по-прежнему черный
Nohman 22 март 2014, в 16:02
0

Измените "рамка снизу: 4px сплошной черный" в ".language-icon: hover .arrow-up" к тому, что я написал выше.
robbclarke 22 март 2014, в 16:07

Ещё вопросы

Я обновил демо с вашим кодом, стрелки теперь меняются при зависании, спасибо, но цвет стрелок по-прежнему черный
Измените "рамка снизу: 4px сплошной черный" в ".language-icon: hover .arrow-up" к тому, что я написал выше.

JohanVdR · Accepted Answer · 2014-03-22T14-16-00.000Z

Это можно сделать гораздо более простым способом. Нет необходимости в дополнительных пролетах.

http://cssdeck.com/labs/cy1u4oeu

 <a class="language-icon fr" href="#" alt="choose-your-language">Language</a>

.language-icon {
color:#000;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
}

.fr {
  background: url(http://www.aventuredusucre.com/images/iconFrenchLanguage.gif) no-repeat;
}

.language-icon:hover {
color:#d13030;
}

.language-icon:before {
content:'';
width:0;
height:0;
position:absolute;
right:5px;
top:40%;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:4px solid #000;
}

.language-icon:hover:before {
border-top: none;
border-bottom:4px solid #d13030;
}

спасибо, мне стало намного понятнее, но как я могу изменить стрелку при наведении курсора на этот код?
При наведении указатель мыши меняет цвет стрелки (.language-icon: hover: before {/ * hover styles * /}) ... или вы хотите изменить другое свойство?
Я хочу изменить стрелку при зависании. Прямо сейчас у него есть стрелка вниз, когда вы не парите. Я хочу стрелку вверх, когда вы наводите курсор на нее. Как на демо, которое я разместил.
Со стрелками, использующими стиль границы для стрелки вверх, это выглядело ужасно. Лучше использовать символы Юникода для стрелок вверх и вниз. cssdeck.com/labs/2qdxhokk