Solved

Jquery onhover

Posted on 2012-03-10
11
384 Views
Last Modified: 2012-03-10
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
Comment
Question by:Panos
  • 7
  • 3
11 Comments
 
LVL 11

Expert Comment

by:maeltar
ID: 37704457
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
 
LVL 2

Author Comment

by:Panos
ID: 37704698
Hi maeltar
The code needs a little correction to show only one div (the onhover div) and not all the hidden divs.
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37704702
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 2

Author Comment

by:Panos
ID: 37704712
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
 
LVL 2

Author Comment

by:Panos
ID: 37704713
....(and hide the shown)....
0
 
LVL 11

Expert Comment

by:maeltar
ID: 37704719
So you don't want it to revert back to it's original state when the mouse leaves ?
0
 
LVL 2

Author Comment

by:Panos
ID: 37704727
You are right. I missed that.
It must revert back .
0
 
LVL 2

Author Comment

by:Panos
ID: 37704860
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
 
LVL 15

Accepted Solution

by:
StingRaY earned 500 total points
ID: 37704915
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
 
LVL 2

Author Comment

by:Panos
ID: 37704941
you are right
thank you for your help.
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 37704947
thank you
regards
panos
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Perl script to process a .csv file 18 45
Do alert on select 6 15
2 separate CSS animations 2 17
Search Item in Table 2 23
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will show, step by step, how to integrate R code into a R Sweave document
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn how to dynamically set the form action using jQuery.

820 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