An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam. Built for students by a student to help them understand the concepts that they are being taught.
Course Of The Month
10 days, 15 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Jquery onhover
Posted on 2012-03-10
Hello experts.
I need help with the onhover function using the code below
Any help?
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>
Any help?
[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
-
7
-
3
11 Comments
This works...
example here :
http://sdparkes.co.uk/ee_ex/hover_div.php
<script type="text/javascript">
$(document).ready(function () {
$('#featureddiv .imagelayout').mouseenter(function(){
$('.front').hide();
$('.back').show();
}).mouseleave(function(){
$('.front').show();
$('.back').hide();
});
});
</script>
example here :
http://sdparkes.co.uk/ee_ex/hover_div.php
Hi maeltar
The code needs a little correction to show only one div (the onhover div) and not all the hidden divs.
The code needs a little correction to show only one div (the onhover div) and not all the hidden divs.
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..
The code hides divs with a class of from, and shows with a class of back, then on mouseleave it reverses it..
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
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
Finally this code is working for me:
$('#featureddiv .imagelayout').mouseenter(
$(this).find('.front').hid
$(this).find('.back').show
}).mouseleave(function(){
$(this).find('.front').sho
$(this).find('.back').hide
});
$('#featureddiv .imagelayout').mouseenter(
$(this).find('.front').hid
$(this).find('.back').show
}).mouseleave(function(){
$(this).find('.front').sho
$(this).find('.back').hide
});
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).
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).
Featured Post
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
This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn the basics of if, else, and elif statements in Python 2.7.
Use "if" statements to test a specified condition.:
The structure of an if statement is as follows:
(CODE)
Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month10 days, 15 hours left to enroll
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.