CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Buszek
Buszek

Reputation: 53

jQuery function on hover does not work, why is that?

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

Answers (4)

fedesc
fedesc

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

Jeto
Jeto

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

Kjetil Hansen
Kjetil Hansen

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

Hemant Parashar
Hemant Parashar

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

Related Questions