Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

Jquery onhover

Posted on 2012-03-10

1 solution

Medium Priority

403 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?

Comment

Question by:Panos

[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

Join The Community

11 Comments

LVL 11

Expert Comment

by:maeltar

ID: 377044572012-03-10

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

LVL 2

Author Comment

by:Panos

ID: 377046982012-03-10

Hi maeltar
The code needs a little correction to show only one div (the onhover div) and not all the hidden divs.

LVL 11

Expert Comment

by:maeltar

ID: 377047022012-03-10

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..

LVL 2

Author Comment

by:Panos

ID: 377047122012-03-10

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

LVL 2

Author Comment

by:Panos

ID: 377047132012-03-10

....(and hide the shown)....

LVL 11

Expert Comment

by:maeltar

ID: 377047192012-03-10

So you don't want it to revert back to it's original state when the mouse leaves ?

LVL 2

Author Comment

by:Panos

ID: 377047272012-03-10

You are right. I missed that.
It must revert back .

LVL 2

Author Comment

by:Panos

ID: 377048602012-03-10

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();
});

LVL 15

Accepted Solution

by:StingRaY

StingRaY earned 2000 total points

ID: 377049152012-03-10

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).

LVL 2

Author Comment

by:Panos

ID: 377049412012-03-10

you are right
thank you for your help.

LVL 2

Author Closing Comment

by:Panos

ID: 377049472012-03-10

thank you
regards
panos

Featured Post

Question has a verified solution.

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

Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

Article by: Serhiy

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.

Reading and Writing to SharePoint with the Javascript API

Article by: Greg

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…

Python Programming: Lists

Video by: Dototot

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…