Grow your CSS skills. Land your dream job.

Trouble with Box Shadow on Rollover (:hover)

  • # December 1, 2011 at 12:45 pm

    See test version…
    Looks good in FireFox (3.6.24 MAC) but box shadow on rollover (:hover) isn’t working with Safari (4.1.3 MAC). And, I’m not sure about ie.

    Any suggestions?

    Thank you,
    CM

    # December 1, 2011 at 2:21 pm

    You need to use the other browser prefixes to make it cross-browser compatible, see below:

    Using different value examples, but all achieving the same look:



    -webkit-box-shadow:0 0 8px rgba(0,0,0,.40);
    -moz-box-shadow:0 0 8px rgb(153,153,153);
    -o-box-shadow:0 0 8px #999;
    box-shadow:0 0 8px #999999;

    *Note: This will not work with any older versions of IE.

    # December 1, 2011 at 2:25 pm

    @standuncan – it looks like that’s in there… but it doesn’t seem to be working:

    #pbnj div.pbnj-charms-container div.pbnj-charm-item a:hover,
    #pbnj div.pbnj-jewelry-container div.pbnj-jewelry-item a:hover,
    #pbnj div.pbnj-collections-container div.pbnj-collections-item a:hover {
    display: inline-block;
    width: 170px;
    height: 60px;
    -webkit-box-shadow: 0 0 8px #999999;
    -moz-box-shadow: 0px 0px 8px #999999;
    box-shadow: 0px 0px 8px #999999;
    }
    # December 1, 2011 at 3:22 pm

    I added the -o-box-shadow for Opera, changed -webkit- to rgba color, added 0px for spread amount and some ie fixes.

    But it’s still not working in Safari 4.1.3. Could it have something to do with the box-shadow being applied to an “a” tag?

    #pbnj div.pbnj-charms-container div.pbnj-charm-item a:hover,
    #pbnj div.pbnj-jewelry-container div.pbnj-jewelry-item a:hover,
    #pbnj div.pbnj-collections-container div.pbnj-collections-item a:hover {
    display: inline-block;
    width: 170px;
    height: 60px;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(153, 153, 153, 1);
    -moz-box-shadow: 0px 0px 8px 0px #999999;
    -o-box-shadow: 0px 0px 8px 0px #999999;
    box-shadow: 0px 0px 8px 0px #999999;
    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=0),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=90),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=180),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=270);
    filter: progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=0),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=90),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=180),
    progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=270);
    }

    # December 1, 2011 at 3:36 pm

    Oops, I over-looked you having it in there. You do not have to use rgba color-mode, I was just showing different examples.

    # December 1, 2011 at 3:41 pm

    Maybe try relocating your box shadow and pseudo to the outer div instead of the a tag?

    When looking through the inspector in Chrome, I don’t see any of the a:hover being applied.. like it’s not being recognized? But it is in FF and IE, hmm…

    In IE, with the Filter style, it adjusts for the size of the shadow and then pushes your element. I would remove it in IE.

    # December 1, 2011 at 4:12 pm

    Yea, can’t get it to show in the inspector either. I feel like there must be an error somewhere in there. Maybe on the page itself or in the CSS.

    # December 1, 2011 at 4:37 pm

    Maybe a plain border on hover for ie 7 and 8 would be simpler. I’ll try moving the hover style to the “DIV” instead of the “a” link to fix the Safari issue.

    # December 1, 2011 at 5:38 pm

    Hmm… it might be because you have a dozen or so CSS errors.

    Open up the console in firebug and enable the logging of CSS errors, find them in your css and correct them. One of them might be the root of your issue. There’s is a bug somewhere and FF is able to compensate and Safari isn’t.

    # December 1, 2011 at 9:34 pm

    just wondering: why there are four numbers in the CSS box-shadow? Should not there just offsetx, offsety and blur?

    # December 1, 2011 at 9:51 pm

    @Hompimpa The fourth value is spread. This is a pretty handy property that acts in a similar way to a border. It is 0px by default, so it doesn’t actually need to be declared.

    # December 3, 2011 at 7:32 am

    I’ve moved the styling for hover to the div instead of the link and it’s working better. Thank you!

    Test Site…

    IE 7 is still acting funny – any ideas? I tried adding display inline for ie 7 but it’s not working.

    CM

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

You must be logged in to reply to this topic.

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