How to apply CSS style for the current page link
Question
Here is my code:
How can I apply a class for the current page link so the mouse cursor will use the default and not the hand?
I don't want to use default cursor on all hovers. I want to apply a class to the active list item and then use default cursor (ie for "Home" index.html) use default cursor for Home when on home page. Thanks!
3 answers
solution1
2 ACCPTED 2012-03-18 00:52:42
first, you need to "ID the body" for every page, giving it a distinction what page you are at.
//when at home page
<body id="home"> //or services or contact
<ul id="navigation">
<li class="home">
<a> and so on...
<li class="services">
<a> and so on...
then, you need to add classes for the "current" pages.
//if literally spoken, it's "when at 'this' page, style the link with 'this' class"
#home .home, //style the home link as "current" when body ID is "home"
#services .services, //style services link as "current" when body ID is "services"
#contact .contact { //style contact link as "current" when body ID is "contact"
//styles when current
}
solution2
1 2012-03-18 00:52:13
You can add this to your hover state
cursor: default;
so something like
#list2 a span:hover {
cursor: default;
}
In most cases, default will give you the arrow, which is what I assume that you want.
More details here: http://reference.sitepoint.com/css/cursor
solution3
1 2012-03-18 00:56:16
You would want to use the CSS cursor property. http://www.w3schools.com/cssref/pr_class_cursor.asp
Try:
div#nav ul li a {
cursor:default;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.