Solved

swap out image on hover

Posted on 2011-03-19
6
364 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

777 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