在 MacOS Firefox 和 Safari 上更改“document.title”时，光标会从“pointer”重置为“default”

Question

我最近创建了一个网页，其中有一个计数器和一个按钮。
点击按钮时计数器会+1，页面标题也会根据计数器编号发生变化。

我有一个 CSS，将所有按钮设置为将

pointer

作为悬停时的光标，效果很好：

button:hover {
  cursor: pointer;
}

但是，当我相应地更改页面标题时：

function changeTitle() {
  document.title = count;
}

光标由

pointer

变为

default

，直至离开按钮并重新进入。

让我们整理一下：

在 MacOS Firefox 和 Safari 上，当我：

单击按钮 -> 递增计数器 -> 更改

document.title

光标从

pointer

变为

default

示例代码：

var count = 0;

const counter = document.getElementById("counter");
const btn = document.getElementById("plus-one");

btn.addEventListener("click", () => {
  count++;
  counter.innerHTML = count;
  document.title = `Now is ${count}`;
})

button:hover {
  cursor: pointer;
}

#plus-one {
  width: 10rem;
  height: 8rem;
}

<html>

<head>
  <title>0</title>
</head>

<body>
  <div id="counter">0</div>
  <button type="button" id="plus-one">+1</button>
</body>

</html>

仅适用于 MacOS Firefox 和 Safari
它适用于 MacOS Chrome、Windows Chrome 和 Windows Firefox。

这是怎么回事？

Answer 1

要保留指针，您可以移除

:hover

。事实上，当你想将鼠标光标设置为按钮中的指针时，你不需要在悬停事件时执行此操作。您可以简单地做到这一点，无需

:hover

。

button {
    cursor: pointer;
}

在 MacOS Firefox 和 Safari 上更改“document.title”时，光标会从“pointer”重置为“default”

问题描述投票：0回答：1

1个回答

最新问题

在 MacOS Firefox 和 Safari 上更改“document.title”时，光标会从“pointer”重置为“default”

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1