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

Jquery onhover

Hello experts.
I need help with the onhover function using the code below
<style type="text/css">
.hidden{display:none;}
</style>
<div id="featureddiv">
 <div class="flleft imagelayout" >
  <div class="front">
   <a href="" rel="" class="resultslink">
    <img src="test.jpg" alt="" name="" width="80" height="80">
   </a>
  </div>
  <div class="back hidden">
   <a href="" rel="" class="resultslink">blablabla</a>
  </div>
 </div>
 <div class="flleft imagelayout" >
  <div class="front">
   <a href="" rel="" class="resultslink">
    <img src="test.png" alt="" name="" width="80" height="80">
   </a>
  </div>
  <div class="back hidden">
   <a href="" rel="" class="resultslink">blablablabla</a>
  </div>
 </div>
</div>
<script type="text/javascript">
$(document).ready(function () {
  	$('#featureddiv .imagelayout').hover(
        function () {
            $(this).find('div .front').hide();
        },
        function () {
            $(this).find('div .back').show();
        }
    );
});
</script>

Open in new window

I want to show the back div onhover.
Any help?
0
Panos
Asked:
Panos
  • 7
  • 3
1 Solution
 
maeltarCommented:
This works...

<script type="text/javascript">
$(document).ready(function () {
    
    $('#featureddiv .imagelayout').mouseenter(function(){
        $('.front').hide();
        $('.back').show();
}).mouseleave(function(){
       $('.front').show();
        $('.back').hide();
  });
    
 
});
</script>

Open in new window


example here :

http://sdparkes.co.uk/ee_ex/hover_div.php
0
 
PanosAuthor Commented:
Hi maeltar
The code needs a little correction to show only one div (the onhover div) and not all the hidden divs.
0
 
maeltarCommented:
Not sure what you mean ?

The code hides divs with a class of from, and shows with a class of back, then on mouseleave it reverses it..
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PanosAuthor Commented:
featureddiv is the main div
each imagelayout  div has two divs :
1. one that is shown
2. one that is hidden

I want to show the hidden one (and the shown) when i rollover the one that is shown.
I hope you understand what i'm trying to do
0
 
PanosAuthor Commented:
....(and hide the shown)....
0
 
maeltarCommented:
So you don't want it to revert back to it's original state when the mouse leaves ?
0
 
PanosAuthor Commented:
You are right. I missed that.
It must revert back .
0
 
PanosAuthor Commented:
Finally this code is working for me:
$('#featureddiv .imagelayout').mouseenter(function(){
        $(this).find('.front').hide();
        $(this).find('.back').show();
}).mouseleave(function(){
        $(this).find('.front').show();
        $(this).find('.back').hide();
  });
0
 
StingRaYCommented:
The problem is your selector.

When you say "div .front" (a space between div and .front), it means you are looking for an element which class "front" under "div". But if you look for a div which contains class named "front", you should write "div.front" (no space).
0
 
PanosAuthor Commented:
you are right
thank you for your help.
0
 
PanosAuthor Commented:
thank you
regards
panos
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now