我悬停时如何更改背景颜色？ [英] How do I make the background-color change when I hover?

问题描述

到目前为止，我的代码很简单，但我不确定如何覆盖我为此类设置的默认背景颜色。必要的html：

My code so far is simple but I'm not sure how to overwrite the default background-color I have set for this class. the necessary 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 ：

and the css that goes with it:

/*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);
}

这里的想法是有一个水平导航栏在屏幕的顶部。每个按钮都有自己的背景和文字颜色。当鼠标悬停在一个按钮上时，我希望alpha在背景颜色上减少.5。



从我所知，类选择器会被自动考虑优先于类选择器+标签选择器（例如.Hufflepuff优先于.Hufflepuff a），我该如何克服？



我是什么尝试过：



我尝试重新排列顺序，以便：悬停选择器位于顶部，但它没有帮助。

The idea here is that there is a horizontal navigation bar at the top of the screen. Each button has it's own background and text color. When the mouse hovers over a button, I want the alpha decreased by .5 on the background-color.

From what I can tell, the class selector is automatically considered priority over class selector + tag selector (e.g. ".Hufflepuff" takes priority over ".Hufflepuff a"), how do I overcome that?

What I have tried:

I tried rearranging the order so that the :hover selector was at the top, but it didn't help.

推荐答案

问题是您在父元素上设置背景颜色，但修改了锚元素的背景颜色。



当您将鼠标悬停在锚点上时，将其背景颜色设置为父级背景颜色的50％不透明版本。但是，混合，例如，来自锚的50％不透明红色与来自父母的100％不透明红色只是给你100％不透明的红色。



你需要改变你的用于在悬停时修改父级的背景颜色的类，而不是锚的背景颜色：

The problem is that you're setting the background colour on the parent element, but modifying the background colour on the anchor element.

When you hover over the anchor, you set its background colour to a 50% opaque version of the parent's background colour. But mixing, for example, 50% opaque red from the anchor with 100% opaque red from the parent just gives you 100% opaque red.

You need to change your classes to modify the background colour of the parent on hover, rather than the background colour of the anchor:

.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;
}

演示 [ ^ ]

检查出来： JSFiddle [ ^ ]。你忘了补充;到

Check this out: JSFiddle[^]. You have forgotten to add ; to

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

这篇关于我悬停时如何更改背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！