滚下

 收藏

我创建了一个过渡图像链接...而这些链接不起作用...有人可以告诉我我错了吗......?

我的代码:

CSS在这里

#F {
    position:absolute;
    width:96px;
    height:90px;
    z-index:1;
    background: url('facebook.png')
}
#F:hover {
    background-image: url('facebook_hover.png')
    }



#T {
    position: absolute;
    width: 96px;
    height: 90px;
    z-index:1;
    background: url('twitter.png');
    left: 132px;
    }
#T:hover {
    background-image: url('twitter_hover.png')
    }

#Gplus {
    position: absolute;
    width: 96px;
    height: 90px;
    z-index:1;
    background: url('g+.png');
    left: 132px;
    top: 300px;
    }
#Gplus:hover {
    background-image: url('g+_hover.png')
    }

的HTML

<div id="F">
<a href='http://facebook.com/'></a>
</div>

<div id="T">
<a href='http://twitter.com/'></a>
</div>

<div id="Gplus">
<a href='http://google.com/'></a>
</div>
回复
  • hculpa 回复

    好的,我会尝试这种方法,但是我注意到Dreamweaver具有为您制作过渡图像链接的功能,所以我尝试了...但是它根本不起作用:/

  • gcum 回复

    我同意大力士的建议。使用这种方法,您可以在锚点链接上使用伪类:hover,该类还将覆盖您的IE6浏览器。将鼠标悬停在其他元素上会导致IE6问题。这对您可能并不重要,但只是想提出这一点,因为我们所有人通常都必须处理IE。

  • 女硬汉 回复

    我知道发生了什么事。我假设您希望div是可单击的并移至正确的URL。但是,现在有了链接,该链接就位于div内并且不包含任何文本,从而使可单击区域很小。我建议不要使用背景图片并将图片放在链接内:

    <a href="http://www.google.com">
      <img src="g+_hover.png" />
    </a>
    

    您可以在div周围放置锚点,并且仍然使用背景图片,但是从技术上讲,这不是正确的HTML,因此如果您关心该页面,则不会放置验证。

  • 简单旳爱 回复

    图片路径在CSS中是否正确?现在,图像将需要与CSS文件位于同一目录中。如果您的图像位于images文件夹中,而CSS文件位于另一个文件夹中,则在CSS的根目录中都应如下所示:

    background-image: url('../images/g+_hover.png');
    

  • 我只爱你 回复

    我确实有技能,但是我的问题是我不是一个很好的计划者和组织者...所以那对我影响很大。...但我同意你的意见:)

  • ueaque 回复

    它们在1个文件中,并且它们的目录都是正确的

  • Rabbit_19C 回复

    虽然Dreamweaver和其他一些IDE确实很不错,并且可以帮助加快开发速度,但我的建议是,您可以通过学习HTML,CSS和JavaScript来建立一些其他技能,而无需使用这些dev应用程序。

    您的代码将更加简洁,您将确切知道发生了什么。