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.
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 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 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.
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