Question

代码HTML：

<div>
    <p>text to appear when the user puts the mouse over</p>
</div>

代码CSS：

    div
{
    background:blue;
    width:100px;
    height:100px;
}

p
{
    display:none;
}

Code JQuery：

  $( 'div' ).hover( function () {

    $( 'p' )//What function should I use here? );

});

我希望只有当用户将箭头放在我的div上时才显示该段落。

我该如何解决这个问题？你能帮帮我吗？

提前致谢！

Answer 1

$('div').hover(function () {
  $( 'p' ).show()
});

Answer 2

有很多方法可以实现这一目标。请参阅以下方法。

$(function() {
  var content; // Declare a variable
  content = $('p').text(); // assign the variable to the p's content only

  $('p').text(''); // Leave the content empty by default 

  $('p').mouseenter(function() {

    $(this).text(content); // Now show it on mouse enter

  }).mouseleave(function() { // empty on mouse leave
    $(this).text('');
  });
});

p {
  background: blue;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>text to appear when the user puts the mouse over</p>

注意：您可以将同一方法应用于DIV，而不是P

Answer 3

这与其他人相同，只是添加了$（document）.ready。

 <script>
  $(document).ready(function(){
    $( 'div' ).hover( function () {

     $( 'p' ).show();

    });
  });

</script>

根据您的jquery代码在页面上的位置 - 可能需要声明$（document）。如果它在头部，它是必需的。

在Jquery中显示的段落

3 个答案: