开发者

How to change the hover color of a scrollbar button?

开发者 https://www.devze.com 2023-02-12 07:13 出处:网络
I need to change the color of a scrollbar button when the mouse moves over it which is at top and bott开发者_如何学编程om (left and right) of scrollbar. How can I change it in WebKit? When I use hover

I need to change the color of a scrollbar button when the mouse moves over it which is at top and bott开发者_如何学编程om (left and right) of scrollbar. How can I change it in WebKit? When I use hover, it is not working. Please help me.


You may or may not be able to change the hover styles on scrollbar buttons as this is browser-dependent. Namely, no known browser has hover styles for scrollbar buttons.

EDIT: thirtydot points out that scrollbar button hover styles are on their way to WebKit's implementation; see his comment for a demo.


You specifically said "how can i change it in webkit", so:

An older answer of mine: Apple-like scrollbars using CSS

Apple's version: http://help.apple.com/mobileme/index.html#mm5b08c671

Live Demo (tested in Chrome dev, Safari 5)

Some useful blog posts:

  • http://webkit.org/blog/363/styling-scrollbars/
  • http://numerosign.com/notebook/styling-webkit-scrollbars-with-css3/
  • http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

Note that it's rather time consuming to:

  • Get it right.
  • Make it look good.

It does looks very slick on Apple's help site, so it may be worth the effort.


So, is possible to change color on a scrollbar, but u have to consider that most browser don't like these css..

body {scrollbar-3dlight-color:#ffd700; 
scrollbar-arrow-color:#ff0; 
scrollbar-base-color:#ff6347; 
scrollbar-darkshadow-color:#ffa500; 
scrollbar-face-color:#008080; 
scrollbar-highlight-color:#ff69b4; 
scrollbar-shadow-color:#f0f}

Otherwise you can use Jquery for personalize you scrollbar. Look at this link: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

0

精彩评论

暂无评论...
验证码 换一张
取 消