I have been struggling with this for a few days and cannot work out the answer:
I am trying to simply change the background of a box when on hover. I have managed to do this for the text but the rest of the box does not change.
The link to the problem can be seen here
Here is the current code I have:
HTML
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="spanish.css"
media="all and (min-width: 1300px)" />
<div class="pricebox1">
Conversational Spanish
</div>
</body>
</html>
CSS
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1 :hover {
background: #ffffff;
color: red;
What am I doing wrong?
Your code .pricebox1 :hover doesn't select the :hover state of the .pricebox1. It point to the :hover state of the children of the .pricebox1. Therefore, it doesn't change the box color.
If you want the hover state of a child change the background of the parent, it is not possible, as "Cascading Style Sheets only supports styling in cascading direction, not up"
So, you can use .pricebox1:hover to change the pricebox1 background color and .pricebox1:hover a to update styles of the a inside.
You can use a workaround solution for it here
Otherwise, you need to use Javascript to update the style of the parent when the child is hover, not only by css
Avoid the space in .pricebox1 :hover - make it .pricebox1:hover to change the background for .pricebox1 on hover.
You'll have to create a separate a:hover rule for the link then to change the text color.
This? In the .pricebox1 :hover {} is not background but background-color
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1:hover {
background-color: white;
color: red;
}
<div class="pricebox1">
Conversational Spanish
</div>
And if you want to change the color of the text at the same time, simply do:
.pricebox1 > a:hover{
color: red;
}
.pricebox1 {
background-color: lightgrey;
width: 300px;
padding: 5px;
margin: 25px 0 0 400px;
text-align: center;
font-size: 1.5em;
}
.pricebox1:hover {
background-color: white;
}
.pricebox1 > a:hover{
color: red;
}
<div class="pricebox1">
Conversational Spanish
</div>
From my end, the code is working fine. The only thing you need to change is the anchor inside .pricebox1 since have got default styling.e.g.
.pricebox1 a:hover{
color: red;
}
Related
I am using WordPress so I wrote the custom color to change the background color of the box on hover but it's not working
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue;
color: white;
}
<div id="project1"></div>
The !important rule is not being overwritten by a new rule that does not have !important.
Either remove !important from the first declaration, or if you absolutely have to keep it there, add it also to the :hover declaration.
#project1 {
height: 100px;
width: 33.33%;
background-color: red !important;
}
#project1:hover {
background-color: blue !important;
color: white;
}
<div id="project1"></div>
Try Removing !important from first rule
#project1{
background-color: red;
}
#project1:hover {
background-color: blue;
color: white;
}
Also, tend to avoid putting !important, rather do the override with better combination of parent selectors.
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I'm trying to change the color of a link on hover of a <div>. Is that possible using just CSS? If not, how would I achieve this?
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
You need to style the anchor, not the div. Try this:
div {
border: 1px solid black;
padding: 15px;
}
div:hover a {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
The div itself has no text, so there's no place to apply the color property. So when you hover a div with nothing to color, nothing happens.
As mentioned in another answer, apply the hover to the anchor element, which contains text.
But your original code would work if instead of color you used background-color or border.
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red; /* won't work; nothing to color */
background-color: aqua; /* this will work */
border: 2px dashed #777; /* this will work */
}
<div>
<a href = 'www.google.com'> www.google.com </a>
</div>
rjdown's answer is correct, but the question is if you still need the div at all.
All a div does is provide a block for you to style. If you style the anchor as block, you have just that. Code bloat is bad for your SEO and headache-freeness. ;-)
Try this:
a:link {
display: block;
/* make it act as the div would */
overflow: auto;
/* or what you want, but good practice to have it */
border: solid 1px black;
}
a:hover,
a:focus,
a:active {
border: solid 1px red;
}
<a href='www.google.com'> www.google.com </a>
Remember to use more than a color change on your hover or the 1 in 12 males with color blindness won't see a thing, potentially, happening. The focus and active additions are for accessibility too. Especially focus is very important for keyboard users.
Good luck.
We can simply assign inherit value to all the CSS properties of anchor tag ,
Thus when you hover above its container DIV element , it will inherit all the new properties defined inside DIV:hover.
div {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 100px;
width: 100%;
color: white;
background: blue;
}
a {
text-decoration: inherit;
color: inherit;
}
div:hover {
color: orange;
}
<div>
www.google.com
</div>
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
I want the Tags tab to have the same background as the Search tab when the mouse is over it, how do I do this?
I have the search tab already with a background as a default but when going to click on Tags how can I get the same background that is on Search to appear behind Tags?
HTML:
<html>
<head>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Use the hover css pseudoclass
http://jsfiddle.net/mrtsherman/7FvR5/
tab-item:hover { background: #c0c0c0; }
unable to add a comment due to my low rep, but i wanted to say that right now what you're doing is just creating a class named "tab-mouseover" which has a background of #bdbdbd. If you apply this class to an element, it will just have a background of #bdbdbd. It doesn't actually mean it will change colors when you mouse over.
Please note that names of classes can be anything. However, in order to achieve the effect you want, you need to do what mrtsherman mentioned (except change the background color to: "#bdbdbd").