another rollover ?

How do I get css to turn my hover state on so it is on all the time? When I rollover my menu my css works fine. When I actually click on my menu and land on that page, I want my menu option to always be in it's hover state. I hope that makes sense. Can you do this in css?

.learn_more
{
	background-image: url('../images/menu/learn_more_off.jpg');
	width: 120px;
	height: 43px;
}

.learn_more:hover 
{
	background-image: url('../images/menu/learn_more_on.jpg');
	cursor:pointer;	
}

Code (markup):

 

You'd be better off using AJAX to accomplish this.

 

That's an intresting viewpoint, care to elaborate?

Anyway, i think the following should work.

.learn_more
{
	background-image: url('../images/menu/learn_more_on.jpg');
	cursor:pointer;	
	width: 120px;
	height: 43px;
}

Code (markup):

 

That's not going to work. If he were to use that method the learn more tab would always be open, regardless of whether he was on that page. Unless he was using different stylesheets for each page that is.

 

Oh, and what I meant when I said it would be easier to use ajax, is that ajax makes it much easier to have dynamic content on your page. A menu that kept drop down tabs open once you're on a certain page requires dynamic coding, and it's pretty hard to do that with just css and html.

 

Who mentioned anything about drop downs?

Anyway, you are correct, the code i posted will not work. OP, try applying a different class to the menu on the page that you want the :hover state on, and then appy my code to that new class.

 

Does it have any child elements?

If it is a drop down menu, use:

.learn_more:active instead of :hover.

Then for child elements, use:

.learn_more:active li{

}

Code (markup):

I am assuming your menu is using HTML like this?

<ul>
<li><a href="#">Dropdown</a>
    <ul>
    <li>List Item 1</li>
    </ul>
</li>
</ul>

Code (markup):

 

That's the sentance most of the responders so far failed to comprehend... at least if I'm reading it right.

You basically want the 'current' page to be the same as the hover state... so if you are on the home page, the HOME button is lit up - if you are on the links page, the LINKS button is lit up - and so forth, right?

To do that, you have to add a class to the 'current' link... I usually call this class 'current' - on each page you have to change this on the menu... If you are sharing the same menu code via an SSI, trap it in the SSI to parse the output - if in HTML, then each page needs it's own version of the menu (which is why most people use a SSI/CGI/PAFNA)

 

WHAT ON EARTH

why would you need XHR for?

<?php
// about.php
$page = 'about';

<ul id="nav">
<li <?php echo ($page == 'about' ? ' class="current" ' : ''); ?>><a href="#">foo</a></li>
</ul>
?>

CSS:
ul#nav li a:hover, ul#nav li.current a { /* hover state declarations */ }
ul#nav li a { /* normal state */ }

and something similar for each nav item.. php seems to be the most favored language here so that's why i used it in the ex.

note: you'd get an error if error reporting is set to the highest unless you also checked if the $page variable was set in the first place.

 

Um Soulscratch - you have your CSS backwards - hover and .current should be BEFORE the parent declaration - Also I'd not be opening and closing PHP every line like a script kiddie (just a gentle ribbing buddy

 

D'oh, wasn't thinking on the css part. How would you spit the nav out? Do everything inside of (one pair of) php delimiters?

 

I'm a firm believer that if you are going to use php on a page, you should open it once at the very start of the page, and close it once at the very end.

As such, that would end up inside an echo, reading:

echo '
	<ul id="nav">
		<li',(
			$page=='about' ?
			' class="current"' :
			''
		),'><a href="#">foo</a></li>
	</ul>
';

Code (markup):

Mind you, that's following my own style guide, which tends to use a few more tabs and carriage returns than what other people use... AND tends to output HTML with proper indenting.