HTML
<a class="topofpage" href="#top">TOP OF PAGE</a>
CSS
.topofpage{
color: #C00;
text-decoration: none;
}
.topofpage a:hover{
color: #FCO;
text-decoration: none;
}
On mouse over color is not changed to #FCO
Remove the anchor element in your CSS on hover event.
.topofpage:hover{
color: #FC0;
text-decoration: none;
}
Your CSS targets a link that is inside an element with the class topofpage. Put the selectors together to target a link that has the class:
a.topofpage:hover {
color: #FC0;
text-decoration: none;
}
Also, as Pavlo spotted, you are using #FCO instead of #FC0 for the color.
Your problem is simply a confusion between zeros and the letter 'O'.
Your colour is specified as #FCO. It should be #FC0.
The letter 'O' is not a valid digit in CSS colours. This is why your style does not work. It has nothing to do with it being hovered or not; it's a simple typo.
Hope that solves it for you. :-)
Related
I am working on an HTML email signature, which has to be done using rudimentary HTML. I have to use very simple CSS, tables and declare inline CSS for everything. All in all it works fine, but I have an issue with links. I can stripe the link to have no underline or color:
<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>
But don't know it is possible at all to add :hover entity inline?
a: hover {text-decoration: underline;}
Any ideas are welcome!
There's no equivalent :hover in inline css.
You can give your anchor tag a class or id and change the property you need in there
<a class="anchor"> link </a>
Inside your css stylesheet
.anchor{
text-decoration: none;
}
if you don't want to use external stylesheet you can add a onmouseover attribute to the element like so
Link
The inline style have higher priority.
simply remove the text-decoration: none; from the element.
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<a style="color:inherit!important;" href="https://#">link</a>
another way is to add !important, but it's considered a bad habit:
a:hover{
text-decoration: underline !important;
}
In Bootstrap 4 i understand it set the default text-decoration to be none.
But using Bootstrap 5 if i just add a raw anchor tag it is now showing both the blue writing and underline.
I was looking to only show the undelrine upon hovering. Is this something bootstrap 5 changed in the release? I cannot find any documentation stating it.
Currently i use:
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
color: inherit
}
but this is also affecting any buttons as links e.g.
Answer
Yes, As of Bootstrap 5 alpha1 the migration docs state:
"Links are underlined by default (not just on hover), unless they’re part of specific components"
You could create a special class like this:
.text-underline-hover {
text-decoration: none;
}
.text-underline-hover:hover {
text-decoration: underline;
}
Link
Demo
Or, if you want it to apply to all anchors except for those that contain a class= attribute use:
a:not([class]) {
text-decoration: none;
}
a:not([class]):hover {
text-decoration: underline;
}
This will not effect btn, only links without class will underline on hover.
All-in-one solution
This CSS code for Bootstrap 5 won't underline your <a ...> links (unless hovered over):
even if they have another class like mb-4 etc
unless they have the btn class, in which case they stay untouched.
Code to copy paste into your CSS file:
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
Proof:
/* Simulate Bootstrap 5 CSS */
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.btn {
text-decoration: none;
border: 1px solid #ccc;
}
a.btn:hover {
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
}
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
An a link without class<br/>
<br/>
An a link with class cool<br/>
<br/>
An a link with class btn
As the default anchor is now underlined, defining custom CSS rules is tricky as these rules will interfere with components (for example navbars, dropdowns, ...).
The official solution i think will be using .text-decoration-none on all the anchors. It's a bit annoying but it's explicit and, we all hope, future-proof. :)
Your <a> tag also has the btn class that's why you get this behaviour.
class="btn btn-outline-dark mr-2 py-0"
Because buttons in bootstrap also has btn class. That's why with your CSS.
a:hover {
text-decoration: underline;
color: inherit
}
All the buttons with class btn also becomes underlined.
Solution:
Just remove btn btn-outline-dark from <a> and use custom class to style it.
Answer
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have a link in a class like this:
<div class="brand">
amazona
</div>
And I changed link color and link:hover color like this:
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
It works perfectly. But when I change the link color in the div like this:
.brand a{
color:brown;
}
The link color is brown even I move the mouse over it. I expect the hover color to be red. Why does it happen? and how can I fix it?
To solve this problem first you need to understand CSS specificity (visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).
And if you are using .brand a CSS is becoming more specific, hence on a:hover also you need to add more specific CSS like .brand a:hover
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
.brand a{
color:brown;
text-decoration: none;
}
.brand a:hover{
color:red;
}
<div class="brand">
amazona
</div>
I am going to take a shot at answering this because I feel it can be better clarified. As mentioned above, a deeper understanding of the CSS language is needed, specifically a deeper understanding of CSS selectors, and how they work.
CSS implements the code you write with in your style-sheet according to order, what was write first is computed first, what was written last is computed last, therefore; if you write:
.some-txt{
color: red;
}
.some-txt{
color: blue;
}
.some-txt{
color: razzle-dazzle-purple;
}
then the text with class some-txt is going to be the color, 'razzle-dazzle-puple'.
This is becuase razzle-dazzle-puple was the last color in the order of assignment given. In your code you gave the color brown to a after red, canceling your previous assignment. To fix this you either be more specific with your selectors like so:
.brand a:hover {
color: red;
}
or just simply try moving things around, I tested your code and I think what you were looking for is this:
a {
color: green;
text-decoration: none;
}
a {
color: green;
text-decoration: none;
}
.brand a {
color: brown;
}
a:hover {
color: red;
}
remember when you add hover to a property, you are adding it to the property, so when you change that property, after you already assigned it a value, you are change the whole property. I hope this makes sense, some things are hard to explain, obviously the best way to understand something is by playing with it.
Because you specified every single link in a .brand div has the colour brown.
You can do
.brand a:hover {
color: red;
}
This will work :)
.brand a style is overriding the a:hover style. if you exchange the order of the two styles in your style-sheet it will work.
The problem I'm facing is, I couldn't change the color of the unvisited link without using the ID preference. Am I missing some core knowledge? What is the difference between;
a:link {
background-color: red;
color: aliceblue;
text-decoration: none;
}
and
#change {
color: aliceblue;
}
The first code part changes the background color but the color of the font remains unchanged. To change the color of the font I needed to used the second code part the one with 'change' as ID.
Sample code as follows: https://codepen.io/can-zgen/pen/GbVyLv
(The part that I'm talking about is at the bottom of the page)
I believe the CSS selectors you want are a:link(reference) to style unvisited links and a:visited(reference) to style visited links.
On a side note, I think your code is working but you have "visited" the links before So, a:link is not applied for you; a:visited is applied. Try doing you dev work for this using Incognito in Chrome (or the equivalent mode in your browser of choice)
Use the change as a class. After that you should use javascript to add this class once the link is clicked for the first time.
a:link color is not working probably because its overwritten by some other css. You can try -
a {
background-color: red;
color: aliceblue;
text-decoration: none;
}
or
a, a:link, a:visited {
background-color: red;
color: aliceblue;
text-decoration: none;
}
and it will work. And if you want to make it specific to only netflix and youtube (from your example), then you can do as follows -
.lilBox a {
background-color: red;
color: aliceblue;
text-decoration: none;
}
Does anybody know if it's possible to prevent underlining on the child of an tag, while underlining the rest of the tag's contents?
Here's an example - you can see this working on JSFiddle. I've tried everything I can think of, but the text underlining continues to be applied to all the text inside the link. I'm viewing on Chrome, but I'm sure this applies to all browsers.
a {
font-size: 32px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a div {
color: pink;
}
a:hover div,
a:active div,
a:focus div {
text-decoration: none !important;
}
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>
Read this similar answer and its links for more information: Remove :hover on :after elemets
http://jsfiddle.net/thirtydot/ygXy6/4/
CSS:
a {
font-size: 32px;
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
HTML:
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
<span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>