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";
}
Related
so I have two sets of links in an HTML document. Most of them (any normal link showing up on the site) have been set to my desired color, but I want four of them to have a different color and hover color than the others.
I set <a class="other" href="/">different link</a> on those links in my HTML and
a.other { color:fff; }
a.other:hover { color: #8741ff; }
in my CSS, but the links of .other are still showing up like all the rest.
Is there a way to rectify this?
Thanks. :)
a.other:link,
a.other:visited {
color: #ffffff;
}
a.other:hover,
a.other:focus {
color: #ffcc00;
}
I think that should do it. You have to use the pseudo-attribute of the link element a.classname:link I guess. And yes, you omitted the hashtag.
You left out the hash sign (#) before fff. :)
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.
For my website I will need to use <span> instead of <a>, because I am using mostly ajax and thus instead of links I have onclick ajax events as attributes in my spans.
As a result, I had to manually style the spans to look like links. I have used hover and visited pseudo classes to change background and text colour, but to change the mouse default to a pointer finger on hover, will I need to use javascript? Or can I do that using css?
Also, I have just realized: I could not just use the <a> tag anyways instead of <span>, but just instead of an href, I would include an onclick? It should work just the same, no?
span {
cursor:pointer;
color:blue;
text-decoration:underline;
}
Hyperlink<br />
<span>Span</span>
Additionally, you can use :hover pseudo-class to style the element when hovered (you can use any styles not just the ones originally used). For example:
span:hover {
text-decoration:none;
text-shadow: 1px 1px 1px #555;
}
Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.
You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:
Link
than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.
Than you don't need to bother with span hover and anything - but just for the sake of it
span:hover {
cursor:pointer;
}
will enable hover hand cursor on hovered span.
Option1
Just use an anchor link as follows:
Link
Option2
I don't know why you would wanna use span , but if you do you can do the following styles to make it look similar to an anchor link.
span {
color: #000000; /* Change this with links color*/
cursor: pointer;
text-decoration: underline;
}
span:hover {
color: #444444; /* Change the value to with anchors hover color*/
}
Just add cursor:pointer; in your span css.
Use CSS to display the cursor as a pointer:
<span style="cursor: pointer;">Pseudolink</span>
http://jsfiddle.net/kkepg/
You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:
span:hover{
cursor:pointer;
}
You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.
You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.
You could use a button instead of span and use bootstrap css classes to style it like a link:
<button class="btn btn-link">Link</button>
It will react on mouseOver as normal links do.
Run the code snippet to preview the result:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button class="btn btn-link">this is my link styled with bootstrap</button>
You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:
<a href="#" onClick="myfunction();return false;">
or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.
You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:
<a href="javascript:void(myFunction())">
Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.
Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.
EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .
I have little experience with CSS so this might be a very simple problem.
I have a table of contents on my web page with links like this:
User interface
and somewhere else I have a bookmark like like this:
<a name="user-interface">User Interface</a>
Besides that I have a CSS file with the following style:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
The goal is to change the color and background color of the link when I move the cursor over the link, and that is working perfectly. But the problem is that the bookmarks are also changing style when I move the mouse pinter over them. It makes sense to me since both the link and the bookmark use the <a> tag but i cannot figure out how to distinguish both on the CSS. I know I could use a class for the link but I wonder if there is a better way.
<a name="..."> is deprecated.
Instead, you should just put an id="..." on any element.
To answer the question, add :link.
While the :link selector appears to work, according to W3Schools, it only applies to unvisited links.
(Edit: It appears W3Schools was misleading on this. The :link selector, in some browsers at least, will select <a> tags that link to something, visited or not, but the color attribute will be overridden by the browser defaults for visited links. Apparently the attribute selector, as detailed below, has a higher specificity than the default browser settings, so if you want to force your links to be the color you set, regardless of whether the user has clicked that link before or not, then the attribute selector should be used.)
One way to do this if you're not overly concerned with IE6, and have a doctype specified for IE 7 and 8, would be to use an attribute selector:
a[href]:hover {
color:#D090D0;
background:#803080;
text-decoration:none;
}
Outside of that, I think you'd be best off adding a class.
Use :link selector to select a link
a:link:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
http://jsfiddle.net/9r4L9/
Use a class:
In HTML, use the class attribute.
User interface
<a name="user-interface">User Interface</a>
In the css:
.foo:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
Now, the style is only applied to the elements having class foo.
Add a class to the bookmark and then add some style on it after the hover declaration:
<a class="bookmark" name="user-interface">User Interface</a>
and css:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
a.bookmark {
color: black;
background: white;
text-decoration:none;
}
I have the following html snippet:
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
Here is the css for these classes
.title
{
color:#707070;
}
.username
{
color:#8DAAB8;
}
.dateandtime
{
color:#A5A7AC;
}
Is it possible to change the colors of these 3 items when hovering over the title?
The colors I want the items to change to are as follows
title = 000000
username = DF821B
dateandtime = 3185B6
Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.
I know this can be done with javascript, but wanted to know if it is possible without javascript.
Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).
Not totally clear on the question -- do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?
In the first case, it's easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won't repeat them here).
In the second case, you'll need a container element that would take the hover, so your code would look like this:
<span class='container'>
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>
(you may want to use <div> rather than <span>, but I'll leave that up to you)
Your CSS would then look like this:
.title {color:#707070;}
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title {color:#000000;}
.container:hover .username {color:#DF821B;}
.container:hover .dateandtime {color:#3185B6;}
Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:
.container:hover span, .container:hover a, {color:#000000;}
Hope that helps.
One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.
It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});