Question

现在我已经设置了以下代码：

$(function() {
    $('.thumbnail').mouseenter(function() {
        $('.thumbnail').fadeOut(200, function() {
            $('.description').fadeIn(200);
        });
    });
    $('.description').mouseleave(function() {
        $('.description').fadeOut(200, function() {
            $('.thumbnail').fadeIn(200);
        });
    });
});

使用这个html：

<div class="thumbnail">
    <img src="image.jpg" />
</div>
<div class="description">
    <p>content here</p>
</div>

效果很好，但我希望缩略图在黑色背景下略微淡化，因此缩略图仍会略显显示。现在，当我将鼠标悬停在背景上时，背景显示为白色。我该怎么做呢？还有，有没有更好的方法来编写代码，可能使用除mouseenter以外的东西？我还是jQuery的初学者，所以对我来说都是新手。

这样的事情是理想的：http://www.brandingdirection.co.uk/

Answer 1

这个怎么样：http://jsfiddle.net/UCy4T/2/

$(function() {

  var animationspeed = 500;

  $('.thumbnail').mouseenter(function() {
    $('.thumbnail').fadeOut(animationspeed);
    $('.description').fadeIn(animationspeed);
  });
  $('.description').mouseleave(function() {
    $('.description').fadeOut(animationspeed);
    $('.thumbnail').fadeIn(animationspeed);
  });
});

为动画速度添加了一个变量。您还需要更改css以将元素设置为相同的位置和尺寸：

.description {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
}

.thumbnail {
  position: absolute;
  left: 0;
  top: 0;
}

Answer 2

- 编辑整理---

的最终代码演示

文字链接版本：http://jsfiddle.net/thewebdes/LDs6C/

图片链接版本：http://jsfiddle.net/thewebdes/jY2e2/1/

HTML

<div class="thumbnail">
    <img src="http://chuvachienes.com/wp-content/uploads/2009/07/hello.jpg" width="200"/>

    <div class="description">
        <p>content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here content here</p>
    </div>
</div>

CSS

.thumbnail { background: #000; width: 200px; height: 200px; overflow: hidden; }
.description { display: none; position: relative; top: -190px; left: 10px; color: #FFF; font-weight: bold; }

JS

$('.thumbnail').hover(function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 0.2);
    $('.description').stop(true,true).fadeIn(400);
}, function() {
    $('.thumbnail img').stop(true,true).fadeTo(400, 1);
    $('.description').stop(true,true).fadeOut(400);
});

要制作链接，请链接要链接的文本片段，或者如果您希望整个块链接，请链接图像。如果链接整个块，为了避免混淆，您应该将cursor: pointer添加到.description p，否则当您将鼠标悬停在文本上时，您只需获取文本选择光标。

显示悬停时淡出的帖子描述

2 个答案: