I just want the letters of the link to change color when user hovers on the link with their mouse.
Is this done by just using the a (for anchor) selector when selecting the element in css?
I don't want anything but the letters changing color.
https://jsfiddle.net/sa16pm5g/
I'm your link
a:hover {
color: black;
}
Insufficient information to give any other answer.
Related
Is there a way to change the blue highlight color when hovering in a drop down menu? I'm using the drop-down list on my page. I have a drop down menu that allows you to choose the topic.
I would greatly appreciate any help or feedback on this topic.
That blue colour is called an outline, and is used for accessibility reasons.
For example, when you press the tab key to move between form elements, an outline is commonly used so the user knows what element is currently selected.
You can remove this outline with the following CSS:
select:focus {
outline: none;
}
However, It is not recommended to remove this. If you must, you should provide an alternative style by using a background colour, changing the text colour, or provide a custom outline instead of the browser default.
ex:
select:focus {
outline: 2px solid red;
}
.dropdown-item.active, .dropdown-item:active {
background-color: red;
}
These are the Bootstrap classes that need to be overwritten if you wish to change the highlighted background colour when you hover over the dropdown item (i.e. when it is "active").
The classes can be discovered by opening up the Elements section within Google Dev Tools (F12) and then highlighting the element that you wish to restyle. Finding the active states of classes can be a little more tricky and may require a little more digging into the HTML.
I have a button like so:
When I hover over it, it looks like this:
When I click on it, it'll take me to a new tab that shows my resume. However, when I come back, there's an underline that I'd like to remove:
And I can and did remove it because I styled the :focus part of the button:
.resume-button:focus {
text-decoration: none;
color: #FFFFFF;
}
The problem arises when the user tries to hover over the link again. It's not hovering anymore because the link is still "clicked"; hence when I hover, the color of the text "Resume" remains white and won't change color until I click somewhere else to reset the link. How can I reset the state of the <a> without clicking on some other part of the website?
Try active and visited state to cover all possibilities. Sometimes link stays active after using browser back button, and links may be marked as visited during normal web browsing.
a:active, a:visited {
color: #fff;
}
Link can have four states:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - link in the moment when clicked
These are the pseudoclasses and they should be declared in this specified order, because in a timeline they can happen only one after other.
People tend to think some shortcuts helpful in remembering the right sequence for example: LoVeHAte.
Use :active selector instead. :focus is selected thing, :active is pressed thing.
the one you're looking for is :visited
a:visited{ /*styles */}
Use the :link selector to style links to unvisited pages,
the :hover selector to style links when you mouse over them,
and the :active selector to style links when you click on them.
Is it possible to tell a link not to change color in CSS and use the default one.
Example
I have a text in red and that text is a link too. Normaly that text will change blue because it's a link, but I want it to stay red.
So is there a global style for a:link to select no color at all ?
Try this in your stylesheet:
a:link {
color:inherit;
}
Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)
If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.
As an example, assume the class important should be shown in red:
.important {
color:red;
}
.important a:link {
color:red;
}
But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)
If all of your a tags are contained within a paragraph tag you can just set the color of the a tag to inherit. You could also just set a style for all a tags to have whatever colour the paragraph tag has. A quick warning about inherit, there are older versions of IE which don't support it(IE7 and earlier).
I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).
Question for CSS designers.
How do I add anchor behavior to any css class without "<a href.." attribute. Here is what I mean.
I'm going to have this html code:
<span class="my_link">LINK TO SOMETHING </span>
and this text should have link behavior (visited color, active color and underlining, "pointing hand pointer").
Is it possible to make this in css?
span.my_link { text-decoration:underline; cursor:pointer; }
You could make use of :hover if you want to apply hover styles to it. Though I'm really not sure why you can't use an anchor.
The visited and active color will have to be done in Javascript. The pointer and underline can be done like this:
.my_link { cursor: pointer; text-decoration: underline; }
Unless you put it in an tag, you can not get the visited, active, etc colors without javascript. You can however get the pointing hand cursor, and the ability for it to go somewhere when you click on it. To make it have the correct pointer use this:
.my_link{ cursor: pointer; }
and for the clicking, use.
$(".my_link.").click(function(){
location.href="page";
}