0

What I'm trying to achieve is using jQuery to display a box when hovering a different element above it.

I've found what I need in this post. You can also check out this jsfiddle. The problem is that this solution doesn't fully meet my needs, because I need the <a> element to be shown on hover state while hovering the box below. When you hover the box, the <a> element loses the hover state, which is pretty standard, but I need it to be shown in hover state.

Any ideas? :)

Community
  • 1
  • 1
Rodrigo D'Agostino
  • 671
  • 5
  • 22
  • 1
    The easiest way to do this is to literally put the `div` inside of the `a`. Since the `a` is the parent no matter where you hover in the `div` `a:hover` will be triggered. Otherwise you just need a simple timeout and check `.on('mouseenter'` & `.on('mouseleave'` for both. – Adam Merrifield Aug 21 '14 at 06:32

1 Answers1

1

Please check updated source code: jsfiddle.

First, I included the div to your html link.

<a class="abc">
    <div class="test">ABC</div>
    <div id="def">TEST</div>
</a>

Second, I added a hover design. You can notice that the link hover isn't gone when you move your mouse to the div.

a.abc:hover {color:red;}

Please note that I didn't add anything to your javascript.

Thank you.

Tonned
  • 286
  • 2
  • 9
  • Just like Adam mentioned it, I guess this is the best solution. I was trying to avoid adding another element, but I guess this is the best and simplest way to achieve what I'm trying to achieve. Thank you so much for your help, guys! :) – Rodrigo D'Agostino Aug 22 '14 at 14:36