脚本Jquery不起作用

Question

我有这个脚本：

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>

代码CSS:

.hide
{
display:none;
}

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

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

http://avocat.dac-proiect.ro/wp/?page_id=10

提前感谢！

编辑：

现在它工作，但所有其他运动图像。。并且我希望保持固定

Answer 1

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

如果是的话，试试这个。。。。

html:

<a href="#" class="wrapper">
    <span class="text">
        This is text
    </span>
    <img src="http://lorempixel.com/100/100">
</a>

css。。。

.wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.8);
    width: 100px;
    height: 100px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}
img {
    z-index:1;
}

Answer 2

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

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

如果你想使用纯css，你可以做以下操作：

.image1:hover p {
    display: block;
 }

如果你想使用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');       
  });
}); 

Answer 3

您实际上可以使用纯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; }

Answer 4

开始吧。jQuery的两行。这需要一个简单的切换。

EDIT:使用fadeToggle()方法使其更加简单。

jQuery

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

完整演示在这里：JSFiddle