Question

我已将此工作变为“几乎就绪”状态：http://jsbin.com/icuvit

有人可以告诉我如何解决这个问题，所以如果我将它悬停在黑暗中，而不是在第一个实例中变暗。所以它来自正常 - ＆gt;暗

我在下面的js代码中有什么变化？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "block"
    })
    .mouseover( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseout( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>

非常感谢任何指示。

Answer 1

你需要稍微交换一下：

初始隐藏面具
当鼠标移动图像时，显示遮罩（当遮罩尚未可见时，您将鼠标悬停在图像上）
当鼠标输出蒙版时，隐藏蒙版（当蒙版已经可见时，您将鼠标移除蒙版）

赞：http://jsbin.com/icuvit/3/edit。

  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
      $("#mask-div").fadeOut("slow");
    })
    .hide();

  $("#test-img")
    .mouseover( function() {
      $("#mask-div").fadeIn("slow");
    });

第一次使用CSS：

#mask-div {
  display: none;
}

Answer 2

如果您实际使用其他一些导致多个图像的选择器，您仍然可以通过以下方式使用pimvdb技术。

$('.test-img').each(function(){
    var $img = $(this);

    $("#mask-div")
        .css({
        "position": "absolute",
        "width": 275,
        "height": 110,
        "background": "rgba(0, 0, 0, 0.5)"
    })
    .mouseout( function() {
        $("#mask-div").fadeOut("slow");
    })
    .hide();

    $img.mouseover( function() {
        $("#mask-div").fadeIn("slow");
    });
});

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>  
  <div id="mask-div"></div>
  <img id="test-img" src="http://www.google.ca/intl/en_ca/images/logo.gif">
<script>
$(document).ready( function() {
  $("#mask-div")
    .css({
      "position": "absolute",
      "width": 275,
      "height": 110,
      "background": "rgba(0, 0, 0, 0.5)",
      "display": "none"
    })
    .mouseout( function() {
         $(this).fadeOut("slow");
    })
  ;

  $("#test-img").mouseover( function() {
      $("#mask-div").fadeIn("slow");
  });

});
</script>  
</body>
</html>

如何在jQuery中切换图像上的fadeIn / fadeOut效果？

3 个答案: