How to capture hover events on css (less) box-shadow

Question

I want to create a button that looks as if it rises as you hover over it. I'm currently using boxshadow to create the visual look of the raised button. Unfortunately, as would probably be expected, the shadow doesn't capture the hover events, which causes the button to behave wildly as you approach it from the bottom.

Here's my less code:

.button-new {
  background-color: lighten(@gray, 10%);
  padding: 10px 20px;
  .border-radius(8px);
  color: white !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  @shadow: 0 4px 0 rgb(183,183,183);
  .box-shadow(@shadow);
  position: relative;
  &:hover {
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
  }
  &:active {
    top: 0;
    @shadow: 0 4px 0 rgb(183,183,183);
    .box-shadow(@shadow);
  }
}

Is there a way to capture hover events over a css box shadow? Or is there a better way to code the button class I want?

You could just add a transition to the button so the hover effect happens gradually. — Shmiddty, Nov 15 '12 at 17:55
That kind of works, but it still has buggy behavior when hovering over the shadow itself. — Thane Brimhall, Nov 15 '12 at 18:17

Gabriele Petrioli · Accepted Answer · 2012-11-15T18:11:07.950

2

The only workaround is to wrap an element around it and use that to grab hover events and target the .button-new ..

something like this

.button-wrap:hover .button-new{
    top: -8px;
    @shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
    .box-shadow(@shadow);
}

Demo at http://jsfiddle.net/gaby/jSJTS/2/
(more css properties have been changed, adjust according to your design..)

edited Nov 15 '12 at 18:11

answered Nov 15 '12 at 17:55

Gabriele Petrioli

191,379
34
261
317

score 2 · Answer 2 · answered Nov 15 '12 at 18:16

The exact answer to my question is: "It's impossible." (see Gaby's excellent answer.)

I did manage to get it a different way without using a wrapper div; instead of using a box shadow I used the css pseudoclass before:

.button-new {
  background-color: lighten(@gray, 10%);
  padding: 10px 20px;
  .border-radius(8px);
  color: white !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  border-bottom: 4px solid rgb(183,183,183);
  position: relative;
  &:hover {
    top: -8px;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 8px;
      left: 0;
      width: 100%;
      height: 100%;
      .border-radius(8px);
      background: green;
      border-bottom: green 4px solid;
    }
  }
  &:active {
    top: 0;
    &:before {
      top: 0;
    }
  }
}

How to capture hover events on css (less) box-shadow

2 Answers2