Как изменить цвет фона при наведении курсора?
Мой код до сих пор прост, но я не уверен, как перезаписать цвет фона по умолчанию, который я установил для этого класса. необходимый 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 был вверху, но это не помогло.