Question

我在Chrome中发现了一种奇怪的行为。我在下面的JSFiddle中复制了它。

左侧有几个按钮。将鼠标悬停在按钮上时会显示一个标签，单击该标签时，会在新窗口中打开一个链接。

这是一种奇怪的行为：您将鼠标悬停在第一个按钮上，显示标签，单击按钮，链接将在新选项卡中打开。但是当您切换回第一个选项卡时，如果没有光标进入页面本身（只是坐在选项卡名称上），第一个按钮的标签将被关闭，第三个按钮的标签将被打开。光标进入页面后，第3个按钮的标签将关闭。

我做了一些测试，我发现当你打开链接时，光标会向右跳几个像素并向下跳几十个像素。

在JSFiddle示例中，它向右跳4px，向下跳70px。在我的计算机上的文件中（不是确切的代码，而是一个更大的项目），它向右跳5px，向下跳77px。

我已经编写了一些用于调试的JavaScript，它显示了over，out和click事件，鼠标x和y以及事件发生的按钮。数据显示在浏览器控制台中。

此问题仅在Chrome中出现。在其他浏览器中它没有。

您认为是什么导致它？

http://jsfiddle.net/7mn0ygh5/1/

HTML：

<div class="menu">
    <a class="b1" href="http://www.google.com" target="_blank">
        <div class="button"></div>
        <div class="label">Label</div>
    </a>
    <a class="b2" href="http://www.google.com" target="_blank">
        <div class="button"></div>
        <div class="label">Label</div>
    </a>
    <a class="b3" href="http://www.google.com" target="_blank">
        <div class="button"></div>
        <div class="label">Label</div>
    </a>
</div>

CSS：

.menu {
    position: fixed;
    left: 2px;
    top: 10px;
}
.menu > a {
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 2px;
    display: block;
    float: left;
    clear: left;
}
.button {
    background-color: #0088ff;
    width: 40px;
    height: 40px;
    display: block;
    float: left;
}
.label {
    line-height: 40px;
    background-color: #00aaff;
    float: left;
    padding: 0 10px 0 10px;
    display: none;
}
.menu > a:hover .label {
    display: block;
}

在Chrome中打开链接时跳转光标

0 个答案: