I have a list of links which style I control by CSS. I got a problem with the URL they are going, so I want to control that by javascript. So in my <a> i dont want to have href="link.html' but if I take that off, the properties that I had with CSS stop working.
a{
text-decoration: none;
color: #808080;
}
a:visited {
text-decoration: none;
color: #808080;
}
a:hover{
text-decoration: none;
color: blue;
}
How can I keed that properties only having a <a> tag?
You could just return false on your links. Like:
<a href="link.html" onclick="return false;" >Link</a>
Add href="#" what should make the CSS working and that kind of link won't process user into another page.
Related
So I made am making a website with a lot of links, but I don't like the color changing after you clicked a link, so I added the following properties in my css.
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: none;
color:black;
}
a:active {
text-decoration: none;
color:black;
}
a:focus{
text-decoration: none;
}
This works and serves it's purpose, however, my NAV bar uses a switch link, and I need the text to be white. I tried making the specific text in the div white, using the <font color="white> and I tried making all links within my specific div white through css, but nothing seem's to work.
nav code:
<div class="div-right">
<ul style="list-style: none;" class="menu">
<li>
<a href="javascript:;" onclick="changeTab(0)" >Home</a>
<a href="javascript:;" onclick="changeTab(1)" >Projects</a>
</li>
</ul>
You can have a specific CSS to those a tags in the menu.
.div-right > ul > li > a {
color: white;
}
Add more CSS in the same way if you want to hover, visited etc.
I would like to know how to change the CSS for the a href tag.
I have been doing this in the tag directly like the following:
<a style="color: #1474c8; margin-bottom: 20px" href="#">This is link #1 </a>
This is working prefect, but I have to do several links so I consider this isn't the best way to do it. So I created a CSS class, but it's not working the same. Each time I pass the mouse over the link it behaves as a normal hyper link with the default href CSS. If I click in the link it change of color. So not sure what I'm missing
.parentCat_wChildren{
color: #1474c8;
margin-bottom: 20px
}
.parentCat_wChildren a:link{ color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:visited { color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:hover { color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:active { color: #1474c8; text-decoration: none;}
<a class="parentCat_wChildren" href="#">This is link #2.1</a>
Adding a JSBin: https://output.jsbin.com/vutozicato
Your .parentCat_wChildren is already an a anchor so use:
.parentCat_wChildren:link {
or eventually:
a.parentCat_wChildren:link { /*make suer to also use a.parentCat_wChildren{ in this case*/
but not .parentCat_wChildren a:link {
P.S:
You can define text-decoration: none; only in one place, inside your first .parentCat_wChildren{ statement.
I have simple rule form all <a>:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
But I don't want this to apply for <img> inside <a>:
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
How can I ignore this?
You would need to add another set of classes after the first, targeting a img, a img:hover, etc. However, an img element doesn't support text-decoration. What is it your trying to avoid with the image?
You could add a class to the <a> tag.
For example
<a href="link" class="image">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
and then with css:
a.image{
}
In this example you would have to specifically set rules to counter the previously set rules for all <a> tags
Another approach would be to use the extra class in conjunction with the :not selector
a:link:not(.image) {
text-decoration: none;
}
a:visited:not(.image) {
text-decoration: none;
}
a:hover:not(.image) {
text-decoration: underline;
}
a:active:not(.image) {
text-decoration: underline;
}
Put your href inside of a div and assign a class to that div; you can then style the class followed by a:
<div class="stylin">
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
</div>
And then in the stylesheet.
.stylin a:link {
}
Unfortunately there is no way to look and see if an img has a link as a parent (parent selector) to then change the link element based on that. You would need Javascript or JQuery to do that or you can just add a 'link-img' class to any link elements containing an image and set it's CSS properties accordingly.
HTML:
Link 1
Link 2
Link 3
<a class="link-img" href="#">
<img src="smile.png"/>
</a>
CSS:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
.link-img {
text-decoration:none;
}
a:link .myClass,
a:visited .myClass,
a:hover .myClass,
a:focus .myClass,
a:active .myClass {
text-decoration: none;
}
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