What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.
Course Of The Month
5 days, 13 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
Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Suggested Solutions
| Title | # Comments | Views | Activity |
|---|---|---|---|
| What kind of script/language created this graph? | 6 | 65 | |
| isNaN issue on the Table input text | 2 | 41 | |
| Running Scripts (per users) after OS deployment | 2 | 46 | |
| PDF Turn Look | 7 | 34 |
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
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 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)
Suggested Courses
Course of the Month5 days, 13 hours left to enroll
734 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.