Reputation: 41
This is my site.
What I am trying to do: display an image when user hovers over the links.
I am definitely making some stupid mistake but I am not really sure which.
This is what I have done:
HTML
<ul class="nm">
<li><a href="#">Cork</a>
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
.......Remaining li's.....
</ul>
CSS
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
javascript
$('.place-image').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
Please help me out.
Upvotes: 1
Views: 5947
Reputation: 1
$('a').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">Cork</a>
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
Upvotes: 0
Reputation: 1532
You just have to change your Javascript:(In your website ul
has class nm
use it to target specific li
in ul
. )
HTML
<li>
<a href="#">Cork</a>
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
CSS
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
javascript
$( "ul.nm > li" ).
$('li').hover(
function() {
$(this).find('.place-image').fadeIn('slow');
}, function() {
$(this).find('.place-image').fadeOut('slow');
});
Upvotes: 0
Reputation: 13712
Issue: you cannot detect a :hover
state on an element with display: none
A possible solution might be to hide only the img itself, and listen to the :hover
on the wrapper .place-image
or on the a
or li
as you wish. See the demo below:
$('.place-image').hover(
function() {
$('img', this).fadeIn('slow');
},function() {
$('img', this).fadeOut('slow');
}
);
.place-image{
width:326px;
height:326px;
}
.place-image img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">Cork</a>
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
Depending on your circumstances you could achieve this also without js:
.place-image {
width:326px;
height:326px;
}
img {
opacity: 0;
transition: opacity .4s ease;
/*TODO: add crossbrowser prefixes*/
}
li:hover img{
opacity: 1;
}
<ul>
<li>
<a href="#">Cork</a>
<div class="place-image">
<img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
</div>
</li>
</ul>
Upvotes: 0
Reputation: 6264
You where tying to hover a hidden element. That is why your code was not working. You cannot trigger an event on a hidden element.
$('a').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
.place-image{
display:none;
}
div.place-image{
width:326px;
height:326px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">Cork</a>
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
Upvotes: 1
Reputation: 20750
You need to add hover
event to li
like following.
$('li').hover(
function() {
$(this).find('.place-image').fadeIn('slow');
}, function() {
$(this).find('.place-image').fadeOut('slow');
});
Upvotes: 1
Reputation: 68443
What I am trying to do display an image when hover over the links.
make it
<li>
<a href="#">Cork</a>
<div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>
$('li a').hover(
function() {
$(this).next('.place-image img').fadeIn('slow');
},function() {
$(this).next('.place-image img').fadeOut('slow');
}
);
Upvotes: 0