0

ホバーJavaScriptを実装しようとしているので、マウスを画像の上に置くとプロジェクトのタイトルが表示されます

http://www.dawaf.co.uk/jj/

現在、プロジェクトのタイトルではなく、その下の画像が表示されているようです

何か重要なものがありませんか？

<script type="text/javascript" src="/jj/wp-content/themes/child/scripts/modernizr-2.5.3.min.js"></script>
<script type="text/javascript" src="/jj/wp-content/themes/child/scripts/plugins.js"></script>
<script type="text/javascript" src="/jj/wp-content/themes/child/scripts/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
</head>

<body>

  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

<!-- portfolio-catcher -->
<div id="portfolio-catcher">
</div>
<!-- .portfolio-catcher -->

  <header>
    <!-- container -->
    <div class="container">

        <nav id="local">
            <a rel="nofollow" href="#portfolio">Portfolio</a>&nbsp;|&nbsp;
            <a rel="nofollow" href="#contact">Contact</a>
        </nav>

        <h1><a href="#portfolio"><img src="/assets/img/hattie-newman.png" alt="Hattie Newman" /></a></h1>

        <nav id="external">
            <a href="//hattienewman.tumblr.com" target="_blank">News</a>&nbsp;|&nbsp;
            <a href="//twitter.com/hattienewman" target="_blank">Twitter</a>
        </nav>
        <div class="clearfix"></div>

    </div>
    <!-- .container -->

  </header>
4

1 に答える 1

0

各グループ内のタグheightの直前にあるタグ内の は、要素と同じ高さに設定されています。これの高さをゼロに設定すると、以下が表示されます。ホバーはうまく機能しているようです。色見本で画像を完全に覆いたい場合は、完全に削除できます。<span><p><hgroup><li><hgroup><span><img><p>

Firebug より:

<li data-src="http://www.hattienewman.co.uk/images/uploads/madameproject.jpg" style="height: 393px; position: absolute; top: 0px; left: 652px;" class="masonry-brick">
    <p>                 
        <span style="width:308px;height:393px;background:#41bba1" class="cover"></span> 
    </p>
    <hgroup data-project="projects/view/madame-magazine" style="width: 308px; height: 393px; background: none repeat scroll 0% 0% rgb(65, 187, 161); opacity: 0;">
        <div>
            <h3>Editorial</h3>
            <p>                         
                <span class="dash">&mdash;</span>
            </p>
            <p>Madame Magazine</p>
            <p></p>
        </div>
    </hgroup>
    <img alt="xxxxxx" src="http://www.hattienewman.co.uk/images/uploads/madameproject.jpg?Thu Jul 26 2012 01:49:23 GMT+0530 (India Standard Time)">
</li>
于 2012-07-25T20:34:15.497 に答える