脚本Jquery不起作用

我有这个剧本：

jQuery(document).ready(function($) {

    $('.image1').hover(function()
    {
        $('.image1 p').removeClass('hide');

    },
    function()
    {
        $('.image1 p').addClass('hide');        
    });
}); 

这是HTML代码：

  <div class="wrap">

    <div class="wrap1">
<div class="image1"><p>This is some text<p></div>
<div class="image2">This is some text</div>
<div class="image3">This is some text</div>
    </div>
    </div>

当用户将箭头放在第一张图片上时。。。我希望文本出现。移除图像上的箭头时，文本将消失

这个代码有什么问题？ 这是网站：

提前谢谢

编辑：

---

现在它可以工作了，但所有其他的运动图像。。我想保持固定

您的问题不清楚，但我假设您只是想让文本出现在悬停在图像上

如果是这样，试试这个

html:

---

首先，您需要按照以下方式修复标记（关闭所有p标记）：

如果要使用JQuery，请尝试以下操作：

jQuery(document).ready(function($) {
 $('.image1', '.wrap').hover(function() { // on mouse enter
     $(this).find("p").removeClass('hide'); 
 },
 function() { // on mouse leave        
   $(this).find("p").addClass('hide');       
  });
}); 

---

实际上，您可以使用纯CSS来实现这一点

<div class="wrap">
    <div class="wrap1">
        <div class="image image1"><p>This is some text</p></div>
        <div class="image image2"><p>This is some text</p></div>
        <div class="image image3"><p>This is some text</p></div>
    </div>
</div>

.image { width:100px; height:100px; background:#ccc }
.image p { visibility: hidden; }
.image:hover p { visibility:visible; }

这是一些文本

这是一些文本

这是一些文本

.图像{宽度：100px；高度：100px；背景：#ccc}
.image p{可见性：隐藏；}
.image:hover p{可见性：可见；}

给你。两行jQuery。这需要一个简单的切换

编辑：使用

fadeToggle（）

方法使其更加简单

jQuery

$('.wrap1').on('mouseenter mouseleave', '.image', function () {
    $(this).children().fadeToggle();
});

---

这里有完整的演示：

@Diaconescu-两行jQuery…如果您不想完全隐藏文本，则可以始终使用CSS/jQuery混合：

 <div class="wrap">
  <div class="wrap1">
   <div class="image1"><p>This is some text</p></div>
   <div class="image2"><p>This is some text</p></div>
   <div class="image3"><p>This is some text</p></div>
  </div>
</div>

.image1:hover p {
    display: block;
 }

jQuery(document).ready(function($) {
 $('.image1', '.wrap').hover(function() { // on mouse enter
     $(this).find("p").removeClass('hide'); 
 },
 function() { // on mouse leave        
   $(this).find("p").addClass('hide');       
  });
}); 

<div class="wrap">
    <div class="wrap1">
        <div class="image image1"><p>This is some text</p></div>
        <div class="image image2"><p>This is some text</p></div>
        <div class="image image3"><p>This is some text</p></div>
    </div>
</div>

.image { width:100px; height:100px; background:#ccc }
.image p { visibility: hidden; }
.image:hover p { visibility:visible; }

$('.wrap1').on('mouseenter mouseleave', '.image', function () {
    $(this).children().fadeToggle();
});