I already got an underline hover when you go over it.
but now I try to find out how I can make an underline, for example I go to my ''about'' page
so I want an underline under about, so they know I am on that page and when I go to another page like home you will see there is an underline.
sorry for my bad English, hope you guys understand me
html code
You can use below code to make underline for active pages,
.activepage a:active{
text-decoration:underline;
text-decoration-color: blue;
border: none;
display: block;
position: relative;
opacity: 0.8;
color: #1a1a1a;
}
Here I have taken class named activepage and a is link within it.
so whenever user will be on activepage underline will be shown.
Thanks..
Related
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
when I right-click on a hyperlink and select open new window then that link becomes blue with an underline. I want to remove this behavior.
I already search on the internet and find that using 'text-decoration: none;'
I can remove this happening but still it is happening.
I tried text-decoration: none; style at the level of the close on the direct 'a' tag inside HTML (style="text-decoration: none;") but still not working.
There are different states of link: Normal, Hover, Visited so I used 'text-decoration:note on Visited'
footer ul li a:visited{
text-decoration:none
}
in fact I used text-decoration:none at every possible code block,
but still only when I right click and select the link to open in new windows it turns blue underline
That's weird, try this?
a,
a:link,
a:visited,
a::before,
a::after {
text-decoration: none;
color: #000;
font-size: 2rem;
outline: none;
}
Be gone underline
my hover only works on first page when page is activated. Only home page change color when I click on it, but other pages dont change color, can you help me? here is code
#meni li a:hover {
color: #000;
}
#meni li.active a {
color: #000;
}
I saw last question about this and I have HTML DOCTYPE on all pages, thanks :)
I am really confused by what is happening here. I am wondering why the link is white when the cursor is within the button but NOT directly on the link? I want it to be red while cursor is within button boundaries.
I think that this happening is because at that point, the page is inheriting from the declared .links:a color value, but I am wondering how do I get it to override that? The .links:hover doesn't seem to transfer inheritance to .links a:hover (?)
Any help would be greatly appreciated!!
.links a{
color:white;
text-decoration:none;
}
.links:hover{
background-color:white;
color:red;
}
.links a:hover{
background-color:white;
color:red;
}
https://jsfiddle.net/3dujymLk/1/
Your rules are working exactly the way you wrote them. If you want the a text to be red while hovering over the entire div, you need a rule for that. Add something like this:
.links:hover a {
color: red;
}
If it isn't obvious, this controls the text-color of the link while hovering over the div.
I am tring to style a input submit button like an anchor.
But it is putting a second line underneath the anchor.
How do I style just one line?
.usernameAnchor
{
background-color:white;
color: #034af3;
text-decoration: underline;
border: 0px none;
display:inline;
height:25px;
}
Malcolm
EDIT: This problem is in IE8.
That seems to be working fine as I created and checked that here:
http://jsbin.com/adake3/2
Looks like there is something there with your html markup.
Update:
After seeing your code, you are trying to set the text-decoration to underline, but mind you this is a button not a link. One alternative is to give border-bottom to it to mimic underlining something like this:
.usernameAnchor:hover
{
border-bottom:1px solid #0000ff;
}