Solved

swap out image on hover

Posted on 2011-03-19
6
369 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

705 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