Grow your CSS skills. Land your dream job.

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: http://jsfiddle.net/joshnh/bWwNN/

    div:hover::-webkit-scrollbar-track,
    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.

*May or may not contain any actual "CSS" or "Tricks".