Reputation: 53
I want to show description on picture while you hover on pic. The function does not work, I'm trying to use jQuery. I have other function that work, they can cause problem each other ? The other one use completely different classes and ids.
Here is the code:
$(document).ready(function() {
$('#box').hover(function() {
$('#details').show(500);
})
})
.box .details p {
font-size: 14px;
display: none;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="col-lg-2 box" id="box">
<div class="imgBox">
<img class="product-mouseover" src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
<div class="details" id="details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
</div>
Upvotes: 1
Views: 57
Reputation: 2610
A word about hover()
Calling
$( selector ).hover( handlerIn,handlerOut)
is shorthand for:$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut )
;
so you need two handlers in hover()
and you are only using one. add an handler for mouseleave. i.e:
$(document).ready(function() {
$('#box').hover(function() {
$('#details').show(500);
}, function() {
$('#details').hide(500);
})
})
for more read about hover() https://api.jquery.com/hover/
if you just want to show on mouseenter use mouseenter()
https://api.jquery.com/mouseenter/
Upvotes: 0
Reputation: 14927
You want to display the paragraph within the div (#details p
instead of just #detail
), since that's what's hidden in the first place.
Edited with 2 boxes:
$(document).ready(function() {
$('.box').hover(function() {
$(this).find('.details p').show(500);
$(this).addClass('highlighted');
})
})
.box .details p {
font-size: 14px;
display: none;
}
.highlighted {
background-color: purple;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="col-lg-2 box">
<div class="imgBox">
<img class="product-mouseover" src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
<div class="details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
</div>
<div class="col-lg-2 box">
<div class="imgBox">
<img class="product-mouseover" src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
<div class="details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
</div>
Upvotes: 2
Reputation: 116
You are showing the details div on image hover, but the p inside is still hidden. Move display: none from p to .box .details.
Upvotes: 0
Reputation: 3774
It is working, but you're trying to show a div
that is already visible. I think you're trying to show the <p>
. Use $('#details p').show(500)
in the code as below.
$(document).ready(function() {
$('#box').hover(function() {
$('#details p').show(500);
})
})
Upvotes: 0