CODEWITHSUNDEEP
javascriptjquery
Adam Magyar
Adam Magyar

Reputation: 1423

How to make toggle in 2 parts?

Super simple concept. See here http://jquerytest.thepeoplesmarketing.us/jquerydev/index2.html . The gray div is a "slide". I want 5 left to right(not a problem), and on hover, each "animates" the red div which is currently visible on hover in the example.

Obviously, the problem is that when I toggle the red div, my hover focus changes to it, thus untoggling it. How can I make it not "untoggle" until I've moused off the entire parent div?

((Disclaimer; pretty extreme JS/JQ noob with strongish python background, so forgive my stupidity))

Upvotes: 0

Views: 55

Answers (2)

rafaelbiten
rafaelbiten

Reputation: 6240

If you're using jQuery with "hover" state, you'll have to change that. You'll need a function for hovering over the gray divs and than check for a hover out of the red div to hide it again.

You may also check for the state of the red div (if it's showing or not), because if it's not showing, you may want to trigger the houver out on the gray divs too.

edit: Also check Syon answer. I don't think you can do that because you'll probably have more than one gray div, but if you do, go for it.

Upvotes: 0

Syon
Syon

Reputation: 1614

The red div being shown is sitting over top of the hover-element, so it loses hover. Place the red div inside of the hover-element like so:

<div id="box1" class="boxclass">
    <div id="msgbox" class="hideplz" style="display: none;"></div>
</div>

*Alternatively you could do 'mouseenter' on gray div, and 'mouseout' on the red div if you can't change the html structure.

Upvotes: 1

Related Questions