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>
Related
This question already has an answer here:
Remove underline from part of a link
(1 answer)
Closed 1 year ago.
I'm trying to use different colors in the same HTML link. It seems to work at first, but when I hover over the link with the mouse, the underline is drawn with only a single color.
I'm using this HTML as CSS:
body {
background: #E7CEAF;
}
a {
color: white;
background: darkred;
text-decoration: none;
}
a:hover {
color: powderblue;
text-decoration: underline;
}
.tag {
font-style: italic;
color: yellow;
}
a:hover .tag {
text-decoration: none !important;
/* doesn't work */
}
This is some text: <span class="tag">[this is a tag] </span>This is a link, the tag being part of the link
You can play with it on JSFiddle.
As you can see there, the underline is blue, even under the yellow words. How can I style the hovering links to display a yellow underline (or even no line) under the yellow part?
Your code part for a:hover .tag works fine and is rendered correctly, but there is an underline on the link on its own. So you need to remove the underline on the link and add it only to part with text.
body {
background: #E7CEAF;
}
a {
color: white;
background: darkred;
text-decoration: none;
}
a:hover {
color: powderblue;
text-decoration: none;
}
.tag {
font-style: italic;
color: yellow;
}
a:hover .tag {
text-decoration: underline;
}
a:hover .text {
text-decoration: underline;
}
This is some text: <a href="https://www.example.com">
<span class="tag">[this is a tag] </span>
<span class="text">This is a link, the tag being part of the link</span></a>
This question already has answers here:
How to align my link to the right side of the page?
(5 answers)
How to right align a hyperlink in a <div>?
(2 answers)
Closed 2 years ago.
Despite writing style="text-align:right; in the <a> tag (in second last line), the link isn't getting aligned to the right side. please tell how can I align it.
<style>
a:link {
color:rgb(238, 34, 34);
background-color: transparent;
text-decoration: none;
}
a:visited {
color:rgb(238, 34, 34);
background-color: transparent;
text-decoration:none;
}
a:hover {
color: rgb(238, 34, 34);
background-color: rgb(248, 248, 90);
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a{
font-size: 40px;
}
</style>
<body>
<!-- -DONT FORGET TO ADD THE SUITABLE LINK IN href ATTRIBUTES:) - -->
<a href=" " >NAME</a>
About me
</body>
An anchor element is inline and its width adjusts according to the text. text-align: right aligns the text to the right edge of the element. Try using float: right instead:
About me
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>
<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'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;
}