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>
Related
This question already has answers here:
Is it possible to use multiple link styles in css?
(4 answers)
Closed 4 years ago.
I have 2 sets of links on my html page, one for the top and bottom of the page, and one for different pages. But I want to change the second one. After I put this code
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}`
everything on my page becomes those colors. What can I do to change this?
Use class attribute of links contaner to define special style for links inside it. For example:
/* General link style */
a {
color: #0000FF;
}
/* Style for a link inside .special container */
.special a {
color: #00FF00;
}
<div>
Link A
</div>
<div class="special">
Link B
</div>
<div>
Link C
</div>
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
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 the following code and I still see the border under an image. Any idea?
a, a:visited {
color: #000000;
border-bottom: 2px solid black;
padding-bottom: 2px;
text-decoration: none;
}
img {
border: 0;
}
Maybe I should add that I'm working locally...
Code Example: http://jsfiddle.net/8WzMJ/
You put an image inside anchor and give border bottom to anchor, to remove that, remove border from the anchor
a,
a:visited {
color: #000000;
padding-bottom: 2px;
text-decoration: none;
}
or add class to anchor and style it without border
<a class="without-border" href="http://www.seobook.com/images/smallfish.jpg">
<img src="http://www.seobook.com/images/smallfish.jpg" />
</a>
.without-border {
border: none;
}
Without seeing your code, I don't know what the impact of this might be, but you could try:
img{
float:left;
padding-bottom:2px;
}
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}