javascript - 悬停时的 jQuery 函数不起作用，这是为什么？

Question

我想在你将鼠标悬停在图片上时显示图片上的描述。该功能不起作用，我正在尝试使用 jQuery。我还有其他有效的功能，它们会互相造成问题吗？另一个使用完全不同的类和 ID。

代码如下:

$(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>

Answer 1

您想在 div 中显示段落(#details p 而不仅仅是 #detail)，因为这首先是隐藏的内容。

用 2 个框编辑:

$(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>