CODEWITHSUNDEEP
htmlcss
NET
NET

Reputation: 13

CSS - hover question

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.

Upvotes: 1

Views: 383

Answers (3)

Joonas
Joonas

Reputation: 7303

http://jsfiddle.net/axCPq/

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>

Upvotes: 0

VMAtm
VMAtm

Reputation: 28355

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;}

Upvotes: 0

David Grayson
David Grayson

Reputation: 87386

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.

Upvotes: 2

Related Questions