Question

我正在尝试复制鼠标悬停在图片上时发生的文字叠加效果 - 在Guardian web site上找到。

除非我的鼠标重复多次反复跳转（slideDown slideUp）区域的 trail-text 区域，否则我会工作。

我认为这是因为 trail-text 区域成为焦点并导致mouseout事件。

无论如何，任何建议/提示都会非常有用。非常感谢，本...

的mypage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>TEST</title>
    <style type="text/css">
      .pixie {
        width: 870px;
        padding: 0;
        margin: 0;
      }

      .strap {
        padding: 0;
        margin: 0;
      }

      div.caption{
        padding-left: 10px;
        /*background-color: #a5a5a5;*/
        background-color: #e03d32;
        color: white;
      }
      .caption h3 {
        color: white;
      }

      .pixie a,
      .pixie div,
      .pixie a:hover {
        display: block;
        position: relative;
        text-decoration: none;
      }

      .pixie div.trail-text {
        color: #333;
        background-color: transparent;
        background-image: url(../images/grey-bg.png);
        background-repeat: repeat;
      }

      .pixie div.trail-text {
        display: none;
        margin-top: 0;
        position: absolute;
        overflow: hidden;
        text-align: left;
        padding-top: 2em;
        padding-bottom: 0;
        z-index: 10;
        height: 4.25em;
        width: 870px;
      }
    </style>
    <script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
    <script src='javascripts/main.js' type='text/javascript'></script>
  </head>

  <body>
    <div class='pixie'>
      <div class='caption'>
        <h3>Some Big Heading</h3>
        <p class='strap'>Some strapline of stuff</p>
      </div>
      <div class='trail-text'>
        The <strong>Overlay text</strong> which should appear and then disappear.
      </div>

      <img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
    </div>
  </body>
</html>

main.js

$(document).ready(function(){

  $("div.trail-text").attr("style", "display: none;");

  if ($(".pixie,div.trail-text")) {
    var pixies = $(".pixie,div.trail-text");
    $(pixies).mouseover(function() {
      $(this).find("div.trail-text").slideDown("fast")
    }).mouseout(function() {
      $(this).find("div.trail-text").slideUp("fast")
    });
  };
});

Answer 1

问题是mouseover和mouseout事件向上冒泡，这意味着每次鼠标进入或离开div中的任何元素时它们都会触发。

您应该使用jQuery的hover方法，如下所示：

$(".pixie,div.trail-text").hover(
    function() { $(this).find("div.trail-text").slideDown("fast"); },
    function() { $(this).find("div.trail-text").slideUp("fast"); }
);

JQuery Text slideDown / slideUp Overlay on Image保持弹跳？

的mypage.html

main.js

1 个答案: