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。这需要简单的切换。

编辑：使用fadeToggle()方法更简单。

<强>的jQuery

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

此处完整演示：JSFiddle

脚本Jquery不起作用

4 个答案: