The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

How would i add this css style with jQuery?

  • # July 20, 2012 at 1:27 am

    So im working with this right herrr….

    ::-webkit-scrollbar {
    width: 12px;

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;

    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

    I want to have some jquery that would change those rgba values on a hover event. I could simply just use :hover but if i did that than i would be only adjusting the color values when i hover on the scroll bar and not the div that it lives in..

    I’ll post a jsfiddle when i get some headway.

    # July 20, 2012 at 1:33 am

    You can still do it using CSS alone:

    div:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0,0,0,1);
    # July 20, 2012 at 1:33 am

    Holy ham sammich, i guess i am trying to make things harder. Thanks josh

    # July 20, 2012 at 1:34 am

    @_John_ No worries :)

    # July 20, 2012 at 2:33 am

    @joshuanhibbert, i guess a two parter would be,

    Is there anyway to add css3 transitions or jquery for a graceful easing effect when hovering rather than the standard hover?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed