Изменить цвет значка состояния наведения
У меня есть боковое меню, в котором внутри тега <li> есть значок и текст.
При наведении указателя мыши я хочу, чтобы значок стал белым. Сейчас только текст меняется на белый. Я читал другие сообщения, но ни один из них не работал.
Без зависания [Нормальное состояние]
С наведением [состояние наведения]
<li>
<a href = "#">
<span class = "icon-patient"></span>
</a>
<p>Paciente</p>
</li>
li p {
font-size: 0.8em;
}
li span {
font-size: 1.8em;
}
li span:hover {
color: #fff;
}
li a:hover {
text-decoration: none;
}
ul li:hover {
background-color: #5D9CF3;
cursor: pointer;
color: #fff;
transform: perspective(1px) translateZ(0);
transition-duration: 0.25s;
transition-property: background-color;
}
Кроме того, не в последнюю очередь, я бы определил одно наведение для самого внешнего тега, на который вы хотите настроить таргетинг (например, li), а затем вложил бы в него другие теги с изменениями, которые вы хотите во время наведения, без декоратора наведения. Не уверен, что это сработает, но это первое, что я попробую
Как я могу этого добиться? Похоже на решение.
Ответы 4
Попробуй это:
li:hover span {
color: #fff!important;
}
Если это не поможет, ваш значок не является шрифтом.
Если это не работает и это шрифт, мы можем попробовать следующее решение:
li:hover a {
color: #fff!important;
}
li:hover a span{
color: inherit;
}
Есть ли место, где я могу проверить шрифт?
Это шрифт IcoMoon, который я создал. Здесь вы можете увидеть скриншот imgur.com/a/KHnxDsM
Я бы попробовал что-то вроде этого:
li p {
font-size: 0.8em;
}
li span {
font-size: 1.8em;
}
li:hover {
background-color: #5D9CF3;
cursor: pointer;
color: #fff;
transform: perspective(1px) translateZ(0);
transition-duration: 0.25s;
transition-property: background-color;
}
li:hover a{
text-decoration: none;
}
li:hover span {
color: #fff;
}
Насколько я понимаю, интерпретатор css смотрит на ваш тег li: hover, например, как «когда li не зависает, а вложен a is», что означает, что li: hover не отображается. Эти теги помещают курсор на li. Я думаю, вы можете даже навести курсор на оба, так что li: hover a: hover, но сам не пробовал.
Я использовал ваш код и немного изменил CSS, используя предоставленные изображения, только для эффекта наведения.
Можете ли вы проверить, чего вы хотите достичь?
https://codepen.io/alexandrecanijo/pen/jKzVwK
CSS будет выглядеть так:
.link p {
font-size: 0.8em;
margin-top: 20px;
}
.link span {
font-size: 1.8em;
}
.link {
display: block;
width: 80px;
height: 80px;
background: #fff;
text-align: center;
padding: 5px;
text-decoration: none;
}
.link:hover {
cursor: pointer;
background: #5D9CF3;
color: #fff;
transition-duration: 0.25s;
transition-property: background-color;
}
.icon-patient {
margin: 0 auto;
width: 20px;
height: 20px;
display: block;
}
.icon-patient:before {
font-family: "Font Awesome 5 Free";
content: "\f007";
}
.link:hover .icon-patient:before {
color: #fff;
}
Вы можете попробовать это. У меня сработало:
li a span:hover{
color: #fff;
}
Я не уверен на 100%, что не так с вашим кодом, но что-то, что помогает с отладкой, - это инструмент проверки в chrome (ctrl + shift + i). Вы можете переходить к отдельным элементам страницы и манипулировать ими. Я использую это все время для работы с css, так как вы можете определить нужный css и увидеть его в реальном времени (например, поиграйте с css, пока он не покажет то, что вы хотите, при наведении курсора, и сбросив это в определение наведения).