3

我是 jquery 的新手，并且试图在 div 中选择图像。

<div class="div-main">
  <div class="title"></div>
  <div class="description"></div>
  <img class="post-thumb" src="img.jpg"/>
</div>

我试图让标题和描述仅在用户将鼠标悬停在 div 中的图像上时显示。

目前我已经设置好了，当 div-main 悬停在上面时会发生动画

$(document).ready(function(){
    $(".div-main").hover(
      function () {
        $(this).children(".title").fadeIn("slow");
        $(this).children(".description").fadeIn("slow");
        $(".div-main").css({ opacity: 0.1 });
        $(this).css({ opacity: 1.0 });
        $(this).show();
      }, 
      function () {
        $(".title").hide();
        $(".description").hide();
        $(".div-main").fadeIn("fast");
        $(".div-main").css({ opacity: 1.0 });
      }
    );

});
4

3 回答 3

1

jsBin 演示

$(".div-main").hover(
  function () {
    $(".title, .description", this).fadeTo(300, 1);
    $(".div-main").stop().fadeTo(0, 0.3);
    $(this).fadeTo(300,1);
  },function () {
    $(".title, .description").hide();
    $(".div-main").stop().fadeTo(300, 1);
  });
于 2012-06-07T23:35:00.953 回答
0

我决定将其发布为答案。

$('.div-main > img')
    .hover(function(){
        $(this).parent().find(".title, .description").fadeIn();  //Title & description
    },
    function(){
        $(this).parent().find(".title, .description").fadeOut();
    }
);
于 2012-06-07T23:27:13.023 回答
0

当您将鼠标悬停在图像上时，要使描述和标题淡入淡出，您可以这样做：

$('.div-main .post-thumb').hover(function(){
  $(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).parent().find(".title, .description").stop(true).fadeOut();
});

如果图像通常是除了悬停时唯一可见的内容，那么这可能会更好，因为当悬停在标题和描述上时，内容也会保持可见：

$('.div-main').hover(function(){
  $(this).find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).find(".title, .description").stop(true).fadeOut();
});
于 2012-06-07T23:30:19.803 回答