鼠标悬停在文本区滚动条上时，会出现文本光标而不是默认光标

Question

我有一个带滚动条的文本区域。我知道它可能只能在webkit浏览器中使用，这没关系。

我添加了hover，但它没有像预期的那样工作。背景变成了红色，这意味着hover起作用，但是cursor没有改变。

我做错了什么还是Chrome没有完全实现它？

确保点击“运行代码段”以查看演示，或者前往此处：https://jsfiddle.net/k4dm6pgL/

textarea {
  height: 150px;
  width: 500px;
}

textarea::-webkit-scrollbar {
  background-color: #fff;
  width: 16px;
}

textarea::-webkit-scrollbar-track {
  background-color: #fff;
}

textarea::-webkit-scrollbar-track:hover {
  background: red;
  cursor: pointer;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #fff;
}

textarea::-webkit-scrollbar-button {
  display: none;
}

<textarea>Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.

Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.</textarea>

同样的事情也可以在这里编辑：https://jsfiddle.net/k4dm6pgL/

- Jens Törnell

---

请确保您正在使用 Chrome 浏览器。webkit === chrome。 - user3119231

我实际上是这样，但无法复现它。 - Ced

@Ced 你点击了“运行代码段”吗？试试使用jsfiddle链接，看看是否更好。 - Jens Törnell

@Maurice 你点击了“运行代码段”吗？尝试使用jsfiddle链接，看看是否有帮助。 - Jens Törnell

不，我正在使用火狐浏览器。我只是想说需要谷歌浏览器。 - user3119231

Answer 1

我找到了一个简单的解决方案，对我很有效。

使用这个：

textarea {
    cursor: auto;
}

- chux

---

我希望当鼠标悬停在文本上时，光标变为选择 I-bar 光标（这就是它的行为方式），但当鼠标悬停在滚动条上时，我希望它返回到默认的箭头指针。这个简单实现的 CSS 完美地解决了这个问题。 - StackOverflowUser

看起来像魔法一样，但光标的初始值不是“auto”吗？似乎是浏览器的错误。 - Wenfang Du

在现实世界中，光标应该在整个区域内都是文本，而不仅仅是在悬停在文本上时，并且在滚动条上移动时变为箭头。 - Marc Roussel

哇，好棒的解决方案，谢谢！ - MadJoRR

Answer 2

目前似乎没有任何滚动条元素支持cursor。对于这些未完成的属性，这是一种预期行为。

此WebKit博客文章提到了几种可能的自定义方式，但没有说明光标。其他属性，如visibility：hidden也不支持。

一个解决方法可能是在你的文本区域附近添加一个div，将它们包装在另一个div中，为父div设置高度，并将内部div样式设置为停留在滚动条下方并设置光标。

- Siavas

---

谢谢！现在我今晚可以安心睡觉了。不过，我不会称它为一个新属性，因为它已经存在于2010年以来。更像是一种未完成的属性。个人认为他们应该更优先地处理它，以便完成。 - Jens Törnell

非常欢迎您，@JensTörnell。完全同意，自Chrome 4版本以来就可用，所以我也更愿意称其为未完成状态 :) - Siavas

我该让它保持这种状态还是提供一个变通建议？你的理智显然比滚动条上的美观更重要！ - Siavas

你有什么想法吗？我已经知道存在的JS库了。但是它们没有本地滚动条稳定，所以我现在认为还可以。 - Jens Törnell