Disable hover effect in pure css

Question

First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.

In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.

http://jsfiddle.net/ramatsu/Q9rfg/

Here's the markup:

<div class="target">Target
  <a href="#" class="LightMe"><p>.LightMe</p></a>
</div>

And the css:

body {
  background-color: #099;
  height: 100%;
  width: 100%;
  margin-top:200px;
}

.target{
  position: absolute;
  left: 40%;
  height: 100px;
  width: 200px;
  padding: 20px;
  background-color: #ccc;
  cursor: pointer;

 }

a {
  display: block;
  position: relative;
  padding: 1px;
  border-radius: 15%;
}

a.LightMe {
  /*Starting state */
    background-color: white;
    border-style:solid;
    border-color:#fff;
    top: -120px;
    left: -200px;
    height: 80px;
    width: 80px;
    z-index: 10;
    opacity: 0;
    transition:left 0.55s  ease, opacity .5s .7s ease;
    -webkit-transition:left 0.55s  ease, opacity .5s .7s ease;
    -o-transition:left 0.55s  ease, opacity .5s .7s ease;
}

.target:hover a.LightMe {
/*Ending state*/
  left: 80px;
  opacity: 1;
  transition:left 0.55s .7s ease, opacity .5s ease;
  -webkit-transition:left 0.55s .7s ease, opacity .5s ease;
  -o-transition:left 0.55s .7s ease, opacity .5s ease;
}

.target:hover {
    transition: background-color 500ms ease;
    -webkit-background-color 500ms ease;
    -o-background-color 500ms ease;
    background-color:#999;
}

Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.

I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.

I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)

I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.

I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):

possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Bram Vanroy, Oct 31 '13 at 08:28

score 2 · Accepted Answer · answered Oct 31 '13 at 09:58

2

You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.

See: http://jsfiddle.net/Q9rfg/4/

Or you can also use this method, combined with the sibling selector as suggested by aorcsik.

answered Oct 31 '13 at 09:58

hexalys

5,177
3
31
56

Thanks, that's perfect! And I'm in your debt not just for the idea, but for the execution, because I can guarantee you that at the level I'm at, it would have taken me a loooong time to get the transition added properly. Don't have enough stackoverflow rep to vote you up, but this solution is a big green checkmark for me. – ramatsu Nov 01 '13 at 17:45

aorcsik · Answer 2 · 2013-10-31T09:13:25.493

1

Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/

The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.

I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.

.mainclass.subclass:hover + a.LightMe {
    /* ... */
}

This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.

This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/

edited Oct 31 '13 at 09:13

answered Oct 31 '13 at 08:38

aorcsik

15,271
5
39
49

That's an interesting solution, though you'd have to clear the pointer because the link area is still there. – hexalys Oct 31 '13 at 09:00
@Bry you're right, I created another, more hacky solution, but it does the trick, and still doesn't involve any javascript. – aorcsik Oct 31 '13 at 09:14
Really hacky indeed... One other solution is to start with a negative index on the transitioned element, in the right context, similarly to what I suggested here: http://stackoverflow.com/a/16100950/1647538 – hexalys Oct 31 '13 at 10:14
Thanks for the idea, aorcsik - I'm going with Bry's approach but forking a copy of yours in case for study and in case my requirements change downstream and some of your ideas become a better fit. Really appreciate the time and interest. – ramatsu Nov 01 '13 at 17:51

Disable hover effect in pure css

2 Answers2