Now I have a element who change color of button to blue... That I want to do I think is very simple but I don´t have enough knowledge of css.
I want to do another class without removing current class, How can I do it?
jsFiddle
Code:
<div>
<div class='btn btn-success'>
<a href='javascript:Addlog(" + id + ");' role='button'>
<i class='fa fa-pencil-square-o'></i> Complete</a>
</div></div>
CSS:
a, .a {
color: #003F8F;
}
a:hover, a:focus {
color: #23527c;
text-decoration: underline;
}
I want to add something like:
a, .a {
color: white;
}
a:hover, a:focus {
color: white;
text-decoration: none;
}
But without removing current css to not affect code that already exists
Use a CSS class then which you can dynamically add or remove from arbitrary elements.
.light {
color: white;
}
a.light:hover,
a.light:focus {
color: white;
text-decoration: none;
}
JS example, assuming your link has class="color-change-button":
document.querySelector('.color-change-button').addEventListener('click', function() {
this.classList.toggle('light');
});
https://jsfiddle.net/DTcHh/27351/
Related
This question already has an answer here:
Remove underline from part of a link
(1 answer)
Closed 1 year ago.
I'm trying to use different colors in the same HTML link. It seems to work at first, but when I hover over the link with the mouse, the underline is drawn with only a single color.
I'm using this HTML as CSS:
body {
background: #E7CEAF;
}
a {
color: white;
background: darkred;
text-decoration: none;
}
a:hover {
color: powderblue;
text-decoration: underline;
}
.tag {
font-style: italic;
color: yellow;
}
a:hover .tag {
text-decoration: none !important;
/* doesn't work */
}
This is some text: <span class="tag">[this is a tag] </span>This is a link, the tag being part of the link
You can play with it on JSFiddle.
As you can see there, the underline is blue, even under the yellow words. How can I style the hovering links to display a yellow underline (or even no line) under the yellow part?
Your code part for a:hover .tag works fine and is rendered correctly, but there is an underline on the link on its own. So you need to remove the underline on the link and add it only to part with text.
body {
background: #E7CEAF;
}
a {
color: white;
background: darkred;
text-decoration: none;
}
a:hover {
color: powderblue;
text-decoration: none;
}
.tag {
font-style: italic;
color: yellow;
}
a:hover .tag {
text-decoration: underline;
}
a:hover .text {
text-decoration: underline;
}
This is some text: <a href="https://www.example.com">
<span class="tag">[this is a tag] </span>
<span class="text">This is a link, the tag being part of the link</span></a>
In the existing CSS file, we have:
a:link {
text-decoration: none;
color: #0486d9;
}
a:visited {
text-decoration: none;
color: #0486d9;
}
Which is fine, but I don't want that style in all cases. For example, for this link, I want it always white and underlined:
<a id="someId" class="GridviewSort" href="...">Date</a>
I thought this would do it:
.GridviewSort a:link {
text-decoration: underline;
color: white;
}
.GridviewSort a:visited {
text-decoration: underline;
color: white;
}
But it's not. The original style remains. What am I doing wrong?
EDIT:
Thanks, stybl. For some reason the original blue is still being dominant. But the Underline is working! Here's what's happening:
EDIT 2:
Ok, further up in the same style sheet is this:
a {
color: #0486d9 !important;
}
Which is still forcing the link to be blue. I don't want to change or remove this line because of the impact it might have elsewhere in the site. Is there a way to override this one too?
.GridviewSort a:visited targets <a> tags that are children of elements with the GridviewSort class. What you want is to target <a> tags that have that class.
This should work:
a.GridviewSort:link {
text-decoration: underline;
color: white;
}
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}
Note: if you intend to have the same exact style for both clicked and unclicked links, you can shorten it like so:
a.GridviewSort:link,
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I am working on my exam with html/css, and I have a question - we're supposed to make a website for fonts, and I want to have a index page where I want to have one of the fonts showcased like this
R/r
Roboto
And the font is colored in white, while the seperator is colored in a blue color, however I want the seperator to turn to white, while the rest of the text turns to blue.
For now I have this:
a:hover {
color: #00ebff;
transition:
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
And I cant for the life of me figure out how to do it.
You're along the right line, but you need to be more specific in the selector for the separator element. The following CSS should achieve what you need:
a:hover {
color: #00ebff;
}
a:hover span.spacer {
color: #fff !important;
}
Please note that using the !important rule here is essential, since you're using inline styles. However, it would be much better to define the style for .spacer in your CSS file too:
a .spacer {
color: #00ebff
}
a:hover {
color: #00ebff;
}
a:hover .spacer {
color: #fff;
}
<a href="roboto.html">
<h1>R<span class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
.spacer{
color: #00ebff;
}
a:hover {
color: #00ebff;
}
a:hover h1 .spacer{
color: white;
}
a:hover {
color: #00ebff !important;
}
a:hover span.spacer {
color: #fff !important;
}
<a href="roboto.html">
<h1>R<span style="color: #00ebff" class="spacer">/</span>r</h1>
<h2>Roboto</h2>
</a>
Use this code
.spacer{
color: #fff;
}
a:hover {
color: #00ebff;
}
a:hover .spacer{
color: white !important;
}
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}