I was wondering how can I keep my main parent category highlighted as when hovered on when viewing the main parents sub categories using CSS?
A quick example or tutorial will help thanks.
-
please post your code so that can able to justify the problemMr.T.K– Mr.T.K2011-07-14 06:59:28 +00:00Commented Jul 14, 2011 at 6:59
-
my html code is very long to post with many nested lists.NET– NET2011-07-14 07:00:53 +00:00Commented Jul 14, 2011 at 7:00
-
You should at least tell us what kind of tools/frameworks you are using to generate your website so that we can give a more specific and helpful answer. Are you just editing HTML files with notepad or what? Do you have multiple files or a single file that changes when the user clicks buttons?David Grayson– David Grayson2011-07-14 07:12:40 +00:00Commented Jul 14, 2011 at 7:12
Add a comment
|
3 Answers
Your CSS would look something kind of like this:
.highlighted, a:hover {
/* styles for when the category is hovered or highlighted */
}
Then when viewing the subcategories you need to add the "highlighted" CSS class to the element that represents the parent category. How exactly you do this depends on how your website works, but it could be done with javascript or with server-side code.
EDIT 1: Yes, this can be done with just CSS, but it probably requires a lot of manual labor. If your website is just a bunch of static HTML files you could go in and edit each of them to highlight the parent class. For example, on the page entitled "Sedans" (a subcategory of cars) you could change
<div class="category">Cars</div>
to
<div class="category highlighted">Cars</div>
There should be nothing surprising or special about that to you.
2 Comments
NET
is it possible to do with just css?
David Grayson
See my EDIT 1 above in the answer.
You can use the code from CSS play 1 or CSS play 2 for this.
Each of examples meets your needs. Main idea is to use pseudo-class for the base class:
#menu li a:hover {border:0; text-decoration:underline;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}
Comments
CSS:
.main-parent:hover a.parent { color: green; }
.child-ul a:hover { color: green; }
HTML:
<ul class="main-parent">
<li><a class="parent" href="#">Link Parent</a>
<ul class="child-ul">
<li><a href="#">Link Child</a></li>
<li><a href="#">Link Child</a></li>
<li><a href="#">Link Child</a></li>
<li><a href="#">Link Child</a></li>
<li><a href="#">Link Child</a></li>
<li><a href="#">Link Child</a></li>
</ul>
</li>
</ul>
