Question

我正在尝试实现悬停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>

Answer 1

每个height组中<span>标记之前的<p>标记中<hgroup>的{{1}}被设置为与<li>元素。将此<hgroup>的高度设置为零会显示下面的<span>。悬停似乎工作正常。如果您希望彩色样本完全覆盖图像，则可以完全删除<img>。

来自萤火虫：

<p>

Javascript悬停不起作用

1 个答案: