应用 css 转换后锚 url 不起作用答案

【问题标题】：anchor url not not working after applying css transition应用 css 转换后锚 url 不起作用
【发布时间】：2014-12-01 09:36:26
【问题描述】：

在 Stackoverflow 上的某个人的帮助下，我为一个网站创建了一个过渡效果，其中导航链接上的背景图像随着光标悬停而变化。我遇到的问题是，现在指向 url 的链接不起作用，或者它一直不起作用。这是 jsbin http://jsbin.com/geyod/4/edit 。仅供参考，在我的网站上我有 11 张图片正在使用，但据我了解，这应该没什么区别。如果不需要，我不想添加所有 11 张图片。我正在尝试复制本网站 http://www.cssplay.co.uk/menu/css3-animation.html#x 上所做的事情。

【问题讨论】：

你用的是什么浏览器？我正在使用 chrome，当我将鼠标悬停在链接上并右键单击 - >“在新选项卡中打开链接”时，它一直带我到负担得起的.html。这不是预期的行为吗？
Keyvan Sadralodabai 我正在使用 chrome。它应该是网站上导航的链接。只需定期点击并进入该网站的另一个页面。目的不是右键单击或控制单击。
您是说当您点击图片时会转到该页面？不知道为什么它对我不起作用。你在用铬吗？
其实我收回了。仅当我右键单击链接，然后选择“在新选项卡中打开链接”时，它才对我有效。我刚刚将 HTML 和 CSS 下载到本地 HTML 文件中，但我发现它不起作用。给我一分钟让你回复。

标签： html css hover anchor transitions

【解决方案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>

【讨论】：

我不确定我是否在关注你在做什么。我只有 3 个图像的 jsbin，但我正在为此工作的项目使用 11 个图像，当光标悬停并移动到 li 上时，这些图像会通过动画。看起来你所做的只是悬停时的背景变化。如果您查看此站点cssplay.co.uk/menu/css3-animation.html#x，您会看到我正在尝试做什么。如果我误解了你，我会看看这是否会对我的代码产生影响。
有了上面...你可以有一百张图片，只要你不断添加标签它就可以工作。
我所做的更改包括将您的
标签包装在
1. 标签是无效的。

谁让你做所有的相对定位和弄乱 z-index 属性并不是那么聪明。

我在这方面还很陌生，所以我需要花一点时间来看看这与我所拥有的相比如何。我不知道它是否会比使用我正在使用的 z-index 转换涉及更多的代码，但是在考虑之后它看起来可能会起作用。明天我会把这个放在一起。