Style webkit barre de défilement sur certain état

J'aimerais que mon WebKit barres de défilement d'avoir une couleur différente lorsque son conteneur est survolé. Je veux que l'ensemble de la barre de défilement à la lumière.

Je pensais à quelque chose comme ceci ferait l'affaire (mais cela ne veut pas):

.scroller:hover::-webkit-scrollbar {
  background: green;
}

J'ai le style des barres de défilement de la même manière:.scroller, pas à l'échelle mondiale. (Qui fonctionne: .scroller::-webkit-scrollbar) je veux la débordé divs, et non le document.

Un autre (relative) problème: la lumière sur le pouce lorsque vous passez la souris sur la barre de défilement. Cela ne fonctionne pas:

.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb

OriginalL'auteur Rudie | 2011-12-26

  1. 5

    Changer la couleur d'arrière-plan fonctionne très bien pour moi.

    http://jsfiddle.net/QcqBM/1

    div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

    Êtes-vous sûr qu'il n'est pas quelque chose de mal avec votre CSS appel?

    Hein ouais... C'est le genre de ce que j'allais pour: jsfiddle.net/rudiedirkx/QcqBM/2 Et l'autre problème lié? Planant au-dessus de la scrollbar à la lumière de la scrollbar-thumb. (J'ai utilisé track au lieu de thumb quelques temps, mon mauvais.)
    Peut-être que le pseudo (barre de défilement) éléments n'ont pas d'états stationnaire... Ou une hiérarchie. Que serait le sucer.
    Changer le pouce de la couleur sur le hover fonctionne pour moi aussi - jsfiddle.net/QcqBM/3
    C'est sur .scroller:hover. Je veux le pouce de la couleur à changer sur scrollbar:hover. Mais cela nécessiterait une certaine hiérarchie: .scroller::scrollbar:hover ::thumb et qui ne semble pas fonctionner. Ou suis-je en train de faire mal à nouveau??
    Désolé, j'ai enfin l'obtenir maintenant. Je ne pense pas que c'est faisable parce que les pseudo-éléments appartiennent à l'élément parent. Ils ne sont pas hiérarchique de l'un à l'autre. Vous devriez être en mesure de le faire fonctionner avec javascript. Voici un exemple d'utilisation de jQuery pour obtenir l'effet que vous voulez. jsfiddle.net/QcqBM/6

    OriginalL'auteur mrtsherman

  2. 10

    Ceci est possible en utilisant pur CSS, au moins avec la version Chrome 29.

    http://jsfiddle.net/eR9SP/

    De style de la barre de défilement lorsque son conteneur (dans ce cas .scroller) est survolé, utilisation:

    .scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }

    En outre, vous pouvez définir le style de la barre de défilement de pouce lui-même lorsqu'il est survolé ou active (cliqué) à l'aide de l'suivantes:

    .scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }
    Je tiens à souligner le pouce lorsque vous passez la souris sur la piste, ce qui ressemblerait à quelque chose comme: .scroller::track:hover ::thumb, mais la barre de défilement pseudo éléments n'ont pas de hiérarchie, donc je pense qu'il n'est pas possible.
    Ah, je vois. Ouais, on dirait que c'est pas possible avec pur CSS.
    Aussi, cela ne semble pas fonctionner pour le réglage de la largeur ou de la hauteur de la barre de défilement. Par exemple: .barre de défilement::-webkit-scrollbar:hover {background:yellow;width:20px} Va changer la couleur d'arrière-plan jaune lors du survol, mais la largeur ne sera pas changé.

    OriginalL'auteur Michael