Can anyone please work out why the background colour for my text-links appear on my image-links despite my every effort to disable it?
I made a Fiddle
<div class="pink">
<p>
The link
</p>
<a class="imagelink nohover" href="#" target="_blank">
<img src="http://www.royalcanin.ca/~/media/Royal-Canin-Canada/Product-Categories/cat-adult-landing-hero.ashx" alt="image" style="max-width:476px;max- height:275px;border:0;">
</a>
</div>
The CSS
.pink {
background-color: pink;
}
.pink a {
color: white;
}
.pink img a:hover {
background-color: transparent !important;
}
.imagelink:not(.nohover):hover{
background-color: transparent !important;
}
.pink a:hover {
text-decoration: none;
color: white;
background-color: blue;
}
The issue is, that the .pink a:hover applies to all links in your div container, if you set a CSS class specifically to your link you want to style your problem is solved
HMTL
The link
CSS
.pink .style-only-this:hover {
text-decoration: none;
color: white;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/25wqoxn0/1/
I replaced the css hover written for image,
.imagelink:not(.nohover):hover{
background-color: transparent !important;
}
New:
.imagelink.nohover:hover{
background: transparent;
}
Check the updated fiddle
Related
I'm trying to make all links on the web page look in a specific way. However, it shouldn't apply to navbar links. I tried to exlude navbar using a:not(.navbar), however, it didn't work: the style applies to all links, including Link 1 in navbar:
html:
<body>
<div class=".navbar">
Link 1
</div>
Link 2
Link 3
</body>
css:
body a:not(.navbar) {
font-size: 100%;
color: black;
text-decoration: none !important;
border-bottom: 6px solid red;
}
body a:not(.navbar):hover {
border-bottom: none;
background-color: #80b3ff;
color: white;
text-decoration: none !important;
}
codepen
The .navbar class is applied to the container DIV of the navbar (not to the links), so your selectors need to be
div:not(.navbar) a { ... }
and
div:not(.navbar) a:hover
BUT you need a container div for the other links (without a class) for this to work, which I inserted in my snippet below. And you had a little error in your class attribute in HTML: It's class="navbar" - without the dot.
div:not(.navbar) a {
font-size: 100%;
color: black;
text-decoration: none !important;
border-bottom: 6px solid red;
}
div:not(.navbar) a:hover {
border-bottom: none;
background-color: #80b3ff;
color: white;
text-decoration: none !important;
}
<body>
<div class="navbar">
Link 1
</div>
<div>
Link 2
Link 3
</div>
</body>
I am working on my exam with html/css, and I have a question - we're supposed to make a website for fonts, and I want to have a index page where I want to have one of the fonts showcased like this
R/r
Roboto
And the font is colored in white, while the seperator is colored in a blue color, however I want the seperator to turn to white, while the rest of the text turns to blue.
For now I have this:
a:hover {
color: #00ebff;
transition:
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
And I cant for the life of me figure out how to do it.
You're along the right line, but you need to be more specific in the selector for the separator element. The following CSS should achieve what you need:
a:hover {
color: #00ebff;
}
a:hover span.spacer {
color: #fff !important;
}
Please note that using the !important rule here is essential, since you're using inline styles. However, it would be much better to define the style for .spacer in your CSS file too:
a .spacer {
color: #00ebff
}
a:hover {
color: #00ebff;
}
a:hover .spacer {
color: #fff;
}
<a href="roboto.html">
<h1>R<span class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
.spacer{
color: #00ebff;
}
a:hover {
color: #00ebff;
}
a:hover h1 .spacer{
color: white;
}
a:hover {
color: #00ebff !important;
}
a:hover span.spacer {
color: #fff !important;
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
Use this code
.spacer{
color: #fff;
}
a:hover {
color: #00ebff;
}
a:hover .spacer{
color: white !important;
}
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 block (div) and which contain text with links.
When I hover over this block I need to change text color (also links color).
"div:hover" - with this text color is changed, but link color remain unchanged.
Full code:
CSS:
a {
color: #336699;
}
div {
height: 50px;
background-color: #FFF;
color: red;
}
div a {
color: red;
}
div:hover {
background-color: #336699;
color: #FFF;
}
HTML:
<div>
text test URL text
</div>
You need to target the link explicitly to override its color.
Like this:
div:hover a {
color: #FFF;
}
FIDDLE
Explanation:
You originally set the the color of the link to red with:
div a {
color: red;
}
When you then add the div:hover{} class - although it is a more specific rule than div a - it does not target the link itself - only the container of the link.
So if there was no rule which set the link color - then the div:hover{} class would kick in and color the link white on hover - via inheritance.
However since there is a rule which colors your links red - you need to target the links themselves on hover via the selector div:hover a
Try this:
div:hover, div:hover a{
background-color: #336699;
color: #FFF;
}
fiddle
You almost got it right. If you need the link to change on hovering the div, you have to do this:
div:hover a {
color: red;
}
fiddle here: http://jsbin.com/bipoq/1/
try this
<style>
a{
color: #336699;
}
div{
height: 50px;
background-color: #FFF;
color: red;
}
div a{
color: red;
}
div:hover{
background-color: #336699;
color: #FFF;
}
div:hover a
{
color: #FFF;
}
</style>
<div>
text test URL text
I have added a Image as a link on my MVC4 website and when i hover over the image a nasty grey highlight appears, is there a way to remove it?
Here is my code below:
<div class="float-left">
<p>
<a href="#Url.Action('Index')">
<img alt="HomePage" style="verticalalign:middle;" height="30px" src="~/Images/formvalue_logo.png">
</a>
</p>
</div>
Thanks in advance.
Try -
.float-left img:hover, .float-left a:hover{
background: none;
background-color: transparent;
}
a img, a img:hover { background-image: none; background-color: transparent; }
might fix your problem... if not, try:
a:hover img, a img:hover { background-image: none; background-color: transparent; }
If that doesn't do the trick, then the background is on the 'a' tag rather than the image, and you'll need to do this:
a { background-image: none; background-color: transparent; }
although this will affect every link on the page, so it might be better to put a class on the link (e.g. myClass), and style using that:
a.myClass, a.myClass img, a.myClass img:hover { background-image: none; background-colour: transparent; }