jquery click and hover questions and issues

[andrewliu]

Hello.

I'm still in the learning process.

I'm trying to figure out how this works. I'm trying to change the background and color of the text on hover and make it click able.

When it is clickable, I would like the background to change on active, and then when you click on something else the previous link will be normal, and the new linked will have the changed background.

So far, I can hover and click links, but when I hover over each link, the previous link hovered won't revert back to the original css. Same with the clicks, the previous click won't go back to normal when on new active link.

So far this is my code that I can figure out.

$(document).ready(function(){
//	$('.accMenu li').hover(function(){
//		$(this).addClass('acctHover');
//		},function(){
//			$(this).removeClass('acctHover');
//	});

	$('.accMenu li').live('click hover',function(){
		$(this).addClass('acctHover');
	},function() {
			$(this).removeClass('acctHover');

		
	});
});

I commented out some of the code because I'm trying to put together hover and click.

Also this is my css

li.acctHover a, li.acctHover a:active {background:#000;}
li.acctHover a, li.acctHover a:active {color:#fff;}

Any help would be great!

Thank you

[diafol]

This is JS. Perhaps it would be better moved to that forum? Ask a mod.

[andrewliu]

oops I apologize. Can someone move this to JS?

Thank you

[diafol]

Flag it as a bad post and explain what you want to do.

[andrewliu]

k thanks!

[SolidSolutions]

this seems like the right forum to me

[SolidSolutions]

in your hover/click function, set the default css to all links first. If your links all have a class (let's say 'allLinks') to start with you can call them by that:

$(".allLinks").css("background","somecolor");
$(".allLinks").css("color","somecolor");

[Agarsia]

maybe this works:

$(document).ready(function() {
 $(".accMenu li").hover(function() {
  $(this).addClass('hover'); //Use CSS to set the style for ".accMenu li.hover"
  $(this).click(function() {
   $(".active").removeClass('active');
   $($this).addClass('active');
  });
 }, function(
  $(this).removeClass('hover');
 )};
});

enjoy :)

[diafol]

> this seems like the right forum to me

THis is dealing with jQuery (Javascript) and then secondarily CSS. How on Earth is that supposed to fit in the PHP forum?

It's not me being pedantic, it's just the fact that the right people will be able to help him that much sooner. Also if you clog up specific forums with random posts, you get anarchy.

OK, I'll shut up now before I start a rant.

[andrewliu]

Thank you!

But I'm having trouble with the clicking portion. I got the hover correct.

This is how my css looks like

li.hover a {background:#000;}
li.hover a {color:#fff;}
.active a:active {
	background:#000;color:#fff;
}

Is this correct?

[andrewliu]

> this seems like the right forum to me

THis is dealing with jQuery (Javascript) and then secondarily CSS. How on Earth is that supposed to fit in the PHP forum?

It's not me being pedantic, it's just the fact that the right people will be able to help him that much sooner. Also if you clog up specific forums with random posts, you get anarchy.

OK, I'll shut up now before I start a rant.

It moved threads. I think he just thought that it was in JS thread when this thread moved.
:-/

[SolidSolutions]

THis is dealing with jQuery (Javascript) and then secondarily CSS. How on Earth is that supposed to fit in the PHP forum?

it doesn't fit the PHP forum. Wasn't saying it should. this is not the PHP forum.

it was in the javascript forum when I posted, which is why I said that it seems like the right forum to me and then posted a suggested help post.

[Ezzaral]

Just to clear up the confusion: Yes, this thread has been moved from PHP to Javascript.

Carry on :)

[Agarsia]

@andrewliu maybe without the :active after the a-css-tag
or we have to do something with the .click() function, i thought it would work inside the .hover()-function, but maybe it don't. tell me if the css-tag was the problem, or if we have to work on the jQuery

[andrewliu]

I took off the :active, and it still doesn't work.

It might be the jquery portion?

Thanks for helping me novice out!

[Agarsia]

you want to have it active also when you are not hovering the li-element, am I right?

[andrewliu]

correct!

Also when one of the links is active, i can still hover over another link. and then if i want to click on another link, the previous link changes back to normal css. and then the new link that was clicked is now active.

[Agarsia]

ok, lets do it like this:

$(document).ready(function() {
 $(".accMenu li").hover(function() {
  $(this).addClass('hover'); //Use CSS to set the style for ".accMenu li.hover"
 }, function(
  $(this).removeClass('hover');
 )};
 $(this).click(function() {
  $(".active").removeClass('active');
  $($this).addClass('active');
 });
});

[andrewliu]

It still doesnt work. I tried it with :active and without :active as well

This is my ul tag

<ul class="accMenu">
<li style="font-weight:bold;">
My Account
</li>
<li>
<a href='#'>Link1</a>
</li>
<li>
<a href='#'>Link2</a>
</li></ul>

and my css

li.hover a {background:#000;}
li.hover a {color:#fff;}
.active a {
	background:#000;color:#fff;
}

I really appreciate you taking the time to help!

Thank you!

[SolidSolutions]

see what I'm doing here and hopefully you can work the rest out as you want from this example:

<html>
<head>
<style type="text/css">
.acctHover {background:#000; color:#fff;}
.activeLink {background:#000;color:#fff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.accMenu li a').hover(function(){
      $('.accMenu li a').removeClass('acctHover');
      $(this).addClass('acctHover');
   })
});
</script>
</head>

<body>

<ul class="accMenu">
<li style="font-weight:bold;">
My Account
</li>
<li>
<a href='#'>Link1</a>
</li>
<li>
<a href='#'>Link2</a>
</li></ul>

</body>
</html>

[andrewliu]

I know how to make it hover, thats not problem. The problem is when you click on the link. The active link's css should change and stay put. And then when new link is clicked the new link's css will change and the old link will go back to normal

[SolidSolutions]

Yes, I thought you could figure it out with what I left you. Does this help you?

<html>
<head>
<style type="text/css">
.acctHover {background:#000; color:#fff;}
.activeLink {background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.accMenu li a').hover(function(){
      $('.accMenu li a').removeClass('acctHover');
      $(this).addClass('acctHover');
   })
   $('.accMenu li a').click(function(){
      $('.accMenu li a').removeClass('activeLink');
      $(this).addClass('activeLink');
   })
});
</script>
</head>

<body>

<ul class="accMenu">
<li style="font-weight:bold;">
My Account
</li>
<li>
<a href='#'>Link1</a>
</li>
<li>
<a href='#'>Link2</a>
</li></ul>

</body>
</html>

[andrewliu]

ahhhhh it does work! brilliant! Thank you all for helping!