Шрифт удивительный цвет не изменится при зависании

Question

У меня есть этот бит css, который работает для изменения курсора при зависании, но не для изменения цвета. Почему курсор меняется, но не цвет?

.fa-star-o:hover { 
    cursor: pointer; 
    color: red; 
} 

Описание Вот некоторые html. Это похоже на это

<div id=@Model.ProfileImages.ElementAt(i).BandyProfileImageId class="item profile-image-item"> 
    <img style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="no profile images"> 
    <i style="z-index: 200; position: absolute; top: 5px; right: 5px; color: whitesmoke;" class="fa fa-trash-o fa-2x trashImage"></i> 
    <i style="z-index: 200; position: absolute; top: 5px; right: 35px; color: yellow;" class="fa fa-star-o fa-2x"></i> 
</div> 

Answer 1

Проблема в том, что вы устанавливаете цвет значка со встроенными стилями. Они не будут изменены стилями в таблице стилей, если вы не используете !important. Это работает для меня, если я использую это:

.fa-star-o:hover { 
    cursor: pointer; 
    color: red !important; 
} 

См this fiddle.

Это, как говорится, лучше всего перемещать все ваши встроенные стили в таблицу стилей и избегать использования !important.

Edit: Кстати, по этой причине вы хотите, чтобы избежать !important, когда это возможно, что он может сделать отладку трудно, потому что CSS больше не каскадирование, как и ожидалось, и если вы или кто-то еще хочет, чтобы переопределить цвет зависать в будущее, вам/им придется снова использовать !important, и это станет порочным циклом.

Answer 2

Мне нужен остальная часть HTML, чтобы проверить это. Тем не менее, я закодировал фрагмент HTML, добавив свой CSS, и он сработал. Посмотрите:

CSS:

.fa-star-o:hover { 
    cursor: pointer; 
    color: red; 
} 

HTML:

<i class="fa fa-star-o">Hi</i> 

И, наконец, jsfiddle: http://jsfiddle.net/b22LneLz/5/

Answer 3

Это из-за inline стилей, как все говорят. Inline имеет преимущество перед classes или ids (если только вы не добавите ! Important). :hover - pseudoclass поэтому имеет преимущественную силу над :hover.

Вот небольшой пример, чтобы вы могли видеть его

.fa-star-o:hover { 
 
    cursor: pointer; 
 
    color: red; 
 
} 
 

 
.stdColor{ 
 
    color: gray; 
 
}

<a class="fa-star-o" style="color: gray" href="www.google.com"> Inline style </a> 
 
</br> 
 
<a class="fa-star-o stdColor" href="www.google.com"> Not inline style </a>

Answer 4

Вы не можете написать аргумент "цвет" в HTML. Как только вы удалите «цвет: желтый»; из html все работает нормально. Используйте только файл css для таких стилей, что у вас не будет проблем.

CSS:

<style> 
    .fa-star-o{color:yellow;} 
    .fa-star-o:hover { 
     cursor: pointer; 
     color: red; 
    } 
</style> 

HTML:

<i class="fa fa-star-o fa-2x">hi</i> 

(i).BandyProfileImageId class="item profile-image-item"> 

<img style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="no profile images"> 

<i style="z-index: 200; position: absolute; top: 5px; right: 5px;" class="fa fa-trash-o fa-2x trashImage">hi</i> 

<i style="z-index: 200; position: absolute; top: 5px; right: 35px; " class="fa fa-star-o fa-2x">hi</i> 

Answer 5

Move ссылка этого CSS-файла (в котором написано выше CSS) в нижней части других ссылок CSS.

Это будет работать.