Question

我有page显示我的摄影作品集。我正在尝试对文本执行jquery渐变，除了第一个链接之外，它正在工作。这是html：

<h1><a href="portfolio/engagements"><span></span>engagements</a>  | </h1><br>
<h1><a href="portfolio/weddings"><span></span>weddings</a>  |  </h1>    <br>
<h1><a href="portfolio/bridals"><span></span>bridals</a>  |  </h1>  <br>
<h1><a href="portfolio/families"><span></span>families</a>  |  </h1>    <br>
<h1><a href="portfolio/seniors"><span></span>seniors</a>  </h1>     <br>

这是jquery调用：

$(".jquery h1").prepend("<span></span>");

以下是css：

.gradient4 span {
    background: url(images/gradient-dark.png) repeat-x;
    position: absolute;
    bottom: -0.1em;
    display: inline;
    width: 100%;
    height: 29px;
}

我遇到的问题是所有网址，但第一个链接（目前是'参与'），都有渐变效果。任何想法为什么第一个链接不起作用？

Answer 1

事实证明，这更像是一个设计问题，但是为了让您了解正在发生的事情，提供渐变叠加层的<span>元素会向左移动。

以下是该问题的屏幕截图。

在左侧一直看着蓝色突出显示的框。这是你的叠加层。它以某种方式定位不正确。

alt text http://dalewhalen.com/stackoverflow/grad_overlay.png

Answer 2

我认为问题在于，当你在<span>前面并使用position：absolute设置时，第一个元素将从其父元素继承其顶部和左侧值，在这种情况下，会出现在左上角的位置。为什么不使用addClass和removeClass来操纵<span>，而不是使用<h1>。它的悬停状态将呈现为<h1 class="gradient">，而它的正常状态只是<h1>。

Jquery渐变行为适用于除第一个URL之外的所有URL

2 个答案: