• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

swap out image on hover

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
iceman19330
Asked:
iceman19330
  • 4
  • 2
1 Solution
 
Maverick_CoolCommented:
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
 
iceman19330Author Commented:
humm would I have to use inline css for that since its a cms thats generating the output.
0
 
Maverick_CoolCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Maverick_CoolCommented:
If the solution has helped you. please award the points.
0
 
iceman19330Author Commented:
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
 
Maverick_CoolCommented:
?
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now