I know for links the css is
a:focus {
text-decorations: none;
-mozselectedsomethingorother: none;
}
or something like that, but is there a way to remove the blue border
http://cl.ly/1d20272p36180S3f1c36
If you have an anchor wrapped around an image, this css should work:
a img { border:none; }
a:focus { outline: none; }
And....someone already answered in the comments :-)
text-decoration: none;
not decorations
Related
I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.
Here is the link to jsfiddle
li {
display: inline-block;
position:relative;
line-height: 7vmax;
vertical-align: middle;
}
ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}
a:hover { background-color: #2c3e50;
padding: 1vmax;}
Does anyone know why is this? And how can I fix this? Thanks.
The flickering and jumping are caused by the padding you're adding on hover.
Simply add the padding on your normal state like this:
ul li a {
color:rgb(23,123,177);
text-decoration: none;
margin-left:5vmax;
font-size:1.3vmax;
padding: 1vmax; // add it here
}
a:hover {
background-color: #2c3e50;
// remove it here
}
I've created a fork of your code and updated it:
https://jsfiddle.net/7jsf9o2t/1/
I have a base CSS that defines this:
a:hover, a:focus {
color: black;
}
I want to have a specific link that overrides and does not trigger focus, but still triggers hover.
How can i do something like this to override the color setting?
a:focus{
color: none;
}
I've tried color:transparent to no avail, focus still triggers.
Try This
a:hover{
color:green;
}
.class:hover, .class:focus {
color: red;
}
dsadsfdsfsd
dsadsfdsfsd
I think you might need like this. This will inherit the color from parent.
a:focus {
color: inherit !important;
}
Please apply this css.
a:hover { text-decoration: none !important; color :none; border: 0px; -moz-outline-style: none;}
a:focus { text-decoration: none !impoartant; outline: none;-moz-outline-style: none;}
You should use initial to set element style to default.
a:focus {
color: initial !important;
}
I have css:
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: underline;
color: #fff;
}
a:active {
text-decoration: none;
color: #CCC;
}
the hover does not work when i first load the webpage however when i click on the hyperlink then go back the hover then works. What is the issue.
Maybe there is some extra CSS hanging around somewhere... You could try resetting CSS at the beginning of your file:
a:visited, a:hover, a:active { text-decoration:none; }
Test your code at the seperate page of your project, I think it works, if it works, there is something else in your project that makes it incorrect, I mean external css
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
Simple question: I have the following markup...
<a href='#'>
<img src='icon.png'> This is the link
</a>
I want to have the text become underlined on mouseover.
What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.
a:hover {
text-decoration: none;
}
a:hover <select_text_here> {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img{
text-decoration: none;
}
should do it. This way all the img tags inside a will be without any underline.
The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:
<img src="" /><span class="link-text">Foo</span>
Obviously you can then just use .link-text to select it.
Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.
You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.
I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:
<img ... /> <span>...</span>
And then apply text-decoration to span element:
a:hover span {
text-decoration: underline;
}
As far as I know you're not able to select the text only.
Perhaps try this :
a:hover {
text-decoration: underline;
}
a:hover IMG {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
another thing you could do is
a{
background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}
or similar, so you don't have to have the image element in the link