KitsunePhoenix Ответов: 2

Как изменить цвет фона при наведении курсора?


Мой код до сих пор прост, но я не уверен, как перезаписать цвет фона по умолчанию, который я установил для этого класса. необходимый html:

<!--This is the site navigation -->
<div class="navbar" id="navbar">
    <a href=""><img src="./Images/Hogwarts_Crest.png" alt="Welcome Home" id="home_image"></a>
    <ul class="navbar">
        <li class="Hufflepuff"><a href="">Browse</a></li>
        <li class="Gryffindor"><a href="">Submit</a></li>
        <li class="Ravenclaw"><a href="">Profile</a></li>
        <li class="Slytherin"><a href="">Settings</a></li>
    </ul>
</div>


и css, который идет с ним:

/*general settings for the houses*/
.Hufflepuff {
	background-color: rgba(255, 255, 0, 1);
	color: Black;
}

.Gryffindor {
	background-color: rgba(255, 0, 0, 1);
	color: rgb(255, 215, 0);
}

.Ravenclaw {
	background-color: rgba(0, 0, 255, 1);
	color: rgb(205, 157, 50);
}

.Slytherin {
	/*background-color is emerald*/
	background-color: rgba(80, 200, 120, 1);
	color: rgb(211, 211, 211);
}

/*settings specifically for links in houses*/
.Hufflepuff a {
	color: Black;
}

.Gryffindor a {
	color: rgb(255, 215, 0);
}

.Ravenclaw a {
	/*text color is bronze*/
	color: rgb(205, 157, 50);
}

.Slytherin a {
	color: rgb(211, 211, 211);
}

/*hover colors*/
.Hufflepuff a:hover {
	background-color: rgba(255, 255, 0, 0.5)
	color: Black;
}

.Gryffindor a:hover {
	background-color: rgba(255, 0, 0, 0.5)
	color: rgb(255, 215, 0);
}

.Ravenclaw a:hover {
	background-color: rgba(0, 0, 255, 0.5)
	/*text color is bronze*/
	color: rgb(205, 157, 50);
}

.Slytherin a:hover {
	background-color: rgba(80, 200, 120, 0.5)
	color: rgb(211, 211, 211);
}


Идея здесь заключается в том, что в верхней части экрана есть горизонтальная панель навигации. Каждая кнопка имеет свой собственный фон и цвет текста. Когда мышь нависает над кнопкой, я хочу, чтобы Альфа уменьшилась на .5 по цвету фона.

Из того, что я могу сказать, селектор классов автоматически считается приоритетом над селектором классов + селектором тегов (например,". Hufflepuff" имеет приоритет над ".Hufflepuff a"), как мне это преодолеть?

Что я уже пробовал:

Я попытался перестроить порядок так, чтобы селектор: hover был вверху, но это не помогло.

2 Ответов

Рейтинг:
2

Peter Leow

Проверить это: JSFiddle[^]. Вы забыли добавить ;

background-color: rgba(255, 255, 0, 0.5)


KitsunePhoenix

спасибо, что указали на это, я все исправил. но это все равно не решило моей проблемы.

Bryian Tan

попробуйте перезаписать его, добавив !
цвет фона: rgba(255, 255, 0, 0.5) !важно;

Рейтинг:
17

Richard Deeming

Проблема заключается в том, что вы устанавливаете цвет фона на родительском элементе, но изменяете цвет фона на якорном элементе.

Когда вы наводите курсор на якорь, вы устанавливаете его цвет фона на 50% непрозрачную версию цвета фона родителя. Но смешивание, например, 50% непрозрачного красного от якоря со 100% непрозрачным красным от родителя просто дает вам 100% непрозрачный красный.

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

.Hufflepuff {
    background-color: rgba(255, 255, 0, 1);
    color: Black;
}
.Hufflepuff:hover {
    background-color: rgba(255, 255, 0, 0.5)
}
.Hufflepuff a,
.Hufflepuff a:hover {
    color: Black;
}

Демонстрация[^]


KitsunePhoenix

он выглядит лучше с точки зрения форматирования кода,но не имеет никакого значения для фактического вывода.

Richard Deeming

Извините, я забыл взять трубку. a из второго селектора. Попробуйте обновленную версию.

KitsunePhoenix

ладно, это работает. Это может вызвать проблему дальше по линии, но я разберусь с этим потом.