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>

Answer 2

关于hover()

呼叫$( selector ).hover( handlerIn,handlerOut)的简称： $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

因此您在hover()中需要两个处理程序，而您只使用一个。为mouseleave添加处理程序。即：

$(document).ready(function() {
    $('#box').hover(function() {
        $('#details').show(500);
    }, function() {
        $('#details').hide(500);
    })
})

有关hover（）https://api.jquery.com/hover/

的更多信息

如果您只想在鼠标输入上显示，请使用mouseenter() https://api.jquery.com/mouseenter/

Answer 3

它正在运行，但是您试图显示一个已经可见的div。我认为您正在尝试显示<p>。在下面的代码中使用$('#details p').show(500)。

$(document).ready(function() {
    $('#box').hover(function() {
        $('#details p').show(500);
    })
})

Answer 4

您正在显示图像悬停时的详细信息div，但是内部的p仍然隐藏。将显示内容从p移到.box。详细信息。

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

4 个答案: