I followed the instructions I found online when using :target, but it's not working. When the first link is clicked, I want the background color and font color of #div1 to change. When the second link is clicked, I want the border of #div2 to change. But nothing changes when I click either of the links.
What am I doing wrong?
a.div1:target {
background-color: blue;
color: yellow;
}
a.div2:target {
border: 10px dotted green;
}
div {
width: 300px;
border: 1px solid;
padding: 50px;
margin: 20px;
}
First Link
Second Link
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
:target matches the element that is linked to, not the link itself.
div#div1:target {
background-color: blue;
}
Related
I've read some code and I saw this background-color: transparent.
I don't know what it is, so I searched the internet, but I couldn't find a resource to explain what it means.
What does background-color: transparent mean and/or do?
As the name suggests, background-color: transparent means you can see through the background of the element, i.e. its background color would appear to be identical to the background color seen on its parent element.
Note that this is different from background-color: white, because if the parent element has a background color other than white, given element will have a different color, i.e. white.
Also keep in mind that it is the initial value of background-color property. Meaning, if you do not explicitly specify the background-color, it will take the value transparent.
Here's an example to give you an idea:
.container {
width: 200px;
border: 1px solid black;
}
.container > div {
width: 150px;
margin: 25px;
border: 1px solid black;
height: 50px;
}
.bg-blue {
background-color: aqua;
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
background-color: white;
}
.bg-yellow {
background-color: yellow;
}
<div class="container bg-blue">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
<div class="container bg-white">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
<div class="container bg-yellow">
<div class="bg-white">White</div>
<div class="bg-transparent">Transparent</div>
</div>
If you use background-color:transparent it means, that you don't want to have a background-color for this element. A typical usecase would be: if you are overlapping another element and want to see the underlying element with it's content or color.
Background is used to make the color transparent. Also remember that you can use it in "color", "border" etc.
color:transparent;
border-color:transparent;
background-color:transparent;
So, I want to increase border size and decrease padding in an img tag when a sibling a tag is hovered. But somehow it doesnt work. Here is my html and css code, i tried using "+" and "~" on css but still doesnt work.
This is my code:
#Body #Banner {
width: 500px;
padding: 15px;
border: 3px solid #eee;
}
#Button:hover + #Banner {
padding: 12px;
border: 6px;
}
<div id="Body">
<img src="https://u.ph.edim.co/6c19/80017655_7_140.png" id="Banner"><br>
Press to continue<br>
</div>
I have a link on my website with borders.HTML:
<p id="hero4">Explore our menu</p>
CSS:
#hero4 {
border:1px solid white;
border-radius:5px;
width:150px;
height:30px;
margin:auto;}
I'd like the entire "box" to turn grey when a user hovers over it, like the "create yours" button on the Starbucks website. Right now, I have:
#hero4 a:hover {
background-color:grey;}
but only the small rectangular area around the text turns grey. How can I change my CSS so the entire area within the border changes color?
Then just set the hover to the #hero4:
#hero4:hover { /*removed a*/
background-color:grey;
}
You can use :hover for any element.
You can move the style from the <p> into the <a> tag, and also set it to display:block;.
#hero4 a {
border: 1px solid blue;
border-radius: 5px;
width: 150px;
height: 30px;
margin: auto;
display: block; /*added*/
text-align: center; /*extra: center text horizontally*/
line-height: 30px; /*extra: center text vertically*/
}
#hero4 a:hover {
background-color: grey;
}
<p id="hero4">Explore our menu</p>
Don't use hover over for anchor tag a, instead use it for the paragraph tag p, as p is the parent for the anchor tag.
Code
#hero4:hover {
background-color: grey;
}
EXAMPLE FIDDLE
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 have a span tag within a button. I just want the span text to change on hover from white to dark when I hover the button. The only way right now it will work is if I put the hover on the span tag itself and then the mouse pointer has to be exactly on the text within the button. If not the whole button is white on hover.
a.sf-button.transparent-dark span {
}
a.sf-button.transparent-dark span:hover {
}
a.sf-button.transparent-dark {
color: #FFF;!important;
background-color: #12225b;
}
a.sf-button.transparent-dark:hover {
color: #666;!important;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
color: #666;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
`
I can not change the way the button is setup because its part of a theme.
Here is the HTML:
<a class="sf-button large transparent-dark stroke-to-fill " href="https://www.domain.com" target="_self"><span class="text">button text</span></a>
I actually went ahead and setup a fiddle for this. And it actually works on the fiddle. So perhaps this means something is interfering with it. But I can not determine what would be.
http://jsfiddle.net/robmcmon/4ZWUX/
You should be able to do something like this:
.test-button:hover .test-span {
color: #ff0000;
}
This should change the spans appearance when the button is changed.
Fiddle: http://jsfiddle.net/DbpgW/