Question

在Stackoverflow上有人的帮助下，我为网站创建了一个过渡效果，当光标悬停时，导航链接上的背景图像会发生变化。我遇到的问题是，现在链接到网址无法正常工作，或者它一直无法正常工作。这是jsbin http://jsbin.com/geyod/4/edit。仅在我的网站上我有11个我正在使用的图像，但据我所知，这不应该有所作为。如果不需要，我不想添加所有11张图片。我正在尝试复制在此网站上所做的工作http://www.cssplay.co.uk/menu/css3-animation.html#x。

Answer 1

我只是对此进行了测试并且有效。这是你想要实现的目标吗？

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
  <style> 
ul
{
 list-style-type: none;
 }
a
{
float: left;
display: block;
}

a.a1 {
    width: 201px;
    height: 149px;
    background-image: url("http://placehold.it/201x149"); /* Any image you want for your first link */
    background-position: center;
    background-repeat: no-repeat;

}
a.a1:hover {
    background-image: url("http://placehold.it/200x150"); /* Any image you want for your first link on mouse over */
    background-position: center;
    background-repeat: no-repeat;
}
a.a2 {
    width: 200px;
    height: 150px;
    background-image: url("http://placehold.it/200x150"); /* Any image you want for your second link */
    background-position: center;
    background-repeat: no-repeat;

}
a.a2:hover {
    background-image: url("http://placehold.it/220x125"); /* Any image you want for your second link on mouse over */
    background-position: center;
    background-repeat: no-repeat;
}
a.a3 {
    width: 201px;
    height: 149px;
    background-image: url("http://placehold.it/201x149"); /* Any image you want for your third link */
    background-position: center;
    background-repeat: no-repeat;

}
a.a3:hover {
    background-image: url("http://placehold.it/200x150"); /* Any image you want for your first link on mouse over */
    background-position: center;
    background-repeat: no-repeat;
}
</style>
    </head>
    <body>
     <div class = "footer"> 

            <nav>

                <p class="footertext">Text Here</p>

                <div class="clear"></div>
                <ul>
                <li class="GetOnList hover"> 
                <a class="a1" href="afordable.html"></a>
                <a class="a2" href="afordable.html"></a>
                  <a class="a3" href="afordable.html"></a>
                </li>
                </ul>

            </nav>



        </div>
    </body>
    </html>

应用css转换后，锚网址无法正常工作

1 个答案: