Solved

swap out image on hover

Posted on 2011-03-19
6
365 Views
Last Modified: 2012-06-27
Had a question the other day that was answered and after closing the question I noticed I had forgotten to ask about swapping the image that is supposed to accompany the text.

heres a link to the page:  http://tinyurl.com/6lxhxww


$('.item-category ul li a').hover(function(){
		var divToShow = this.id.substring(1);
		$('.subcat-details.active').fadeOut('fast',function(){
			$(this).removeClass("active"); // remove the active from the previously active div
			$("#"+divToShow).addClass('active').fadeIn('fast'); // the id of the link is Xsubcat-n
			alert("#"+divToShow);
		});
	});

Open in new window

0
Comment
Question by:iceman19330
  • 4
  • 2
6 Comments
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 35173008
what extra you want to do.
after you add the new css class, thats it.
the new css should have background-url as image.
0
 

Author Comment

by:iceman19330
ID: 35173022
humm would I have to use inline css for that since its a cms thats generating the output.
0
 
LVL 7

Accepted Solution

by:
Maverick_Cool earned 500 total points
ID: 35173062
for you case you need two call backs, one for hover other mouseout

$("#xyz").hover(
   function() {
      //code for hover effect
   },
   function() {
      //code for hover out effect, replace element with original css
   }
);

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 35175913
If the solution has helped you. please award the points.
0
 

Author Comment

by:iceman19330
ID: 35182935
Not sure it has.  This is a data driven page and I cant do much it the css since it is separate.  Maybe I am not thinking about this solution the same way.
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 35204270
?
So what if css separate. You modify it or add head css.

the solution pretty simple, the code you write to add hover effect also write function hover-out in same, as shown in my example.
thats it.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question