0

当用户将鼠标悬停在图像上时，该脚本应该使文本从图像下方向上移动。我不相信 jQuery 正确地调用了这个类，这就是它不工作的原因。我已经包含了来自 jquery 插件的代码以及应该与该插件一起使用的 html 部分。如果您对我有任何疑问，请不要犹豫，我将等待回复，我刚开始使用今天的 jQuery 并且在工作正常时很享受它，但现在一直在寻找答案一段时间，我只是对为什么我无法弄清楚这一点感到困惑。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script>

  $(function(){
  $(' #d1').contenthover({
   overlay_width:300,
   overlay_height:150,
   effect:'slide',
   slide_direction:'bottom',
   overlay_x_position:'center',
   overlay_y_position:'bottom',
   overlay_background:'#000',
   overlay_opacity:0.8
   });
   });

  </script>

  <section id="s-explore">

   <div class="pagebreak"><span>The Lifestyle</span> <i class="down">&lt;</i></div>

    <div class="wrapper layout">

    <div class="col">
        <div class="media">
            <img id="d1" src="images/main.png" />
                <div class="contenthover">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames</p>
                    <p><a href="#" class="mybutton">Lorem ipsum</a></p>
                </div>
        </div>

        <div class="body">
            <h1>Vestibulum</h1>
            <h2>quis<br />Vestibulum</h2>
        </div>
    </div>

工作代码：

 <!DOCTYPE HTML>
 <html>
 <head>

 <link href="hover-content-style.css" rel="stylesheet" type="text/css" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  <script>

  $(function(){


   $('#d1').contenthover({
    overlay_width:300,
    overlay_height:150,
    effect:'slide',
    slide_direction:'bottom',
    overlay_x_position:'center',
    overlay_y_position:'bottom',
    overlay_background:'#000',
    overlay_opacity:0.8
    });

    });

    </script>

    <title>JQuery slide on top of image - animation</title>

    </head>

    <body>
      <img id="d1" src="images/vito_red.png" width="318" height="269" />
         <div class="contenthover">
           <h3>Lorem ipsum dolor</h3>
           <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
           <p><a href="#" class="mybutton">Lorem ipsum</a></p>
          </div>

      <script src="hoverslide.js"></script>

      </body>
4

1 回答 1

0

您需要包含该js文件：http ://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.min.js

这是一个工作示例；http://jsfiddle.net/btevfik/MbLNN/

于 2013-03-25T05:00:01.883 回答