?
Solved

swap out image on hover

Posted on 2011-03-19
6
Medium Priority
?
372 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 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

650 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