hover over one div, another div fades in and remains visible while user hovers over it

Question

I have a container div. Inside the container, apart from the article's title, there is a hidden div (position:abolute, next to the article's title & "outside" of the container div) which contains the article's image and trimmed text.

What I want: User hovers over article's title:

<div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>

As a result, the popup

<div class="article_popup">

fades in next to the article's title container.

If user doesn't hover over popup, popup fades out after 1 sec. If he does, popu stays visible as long as user mousesover the popup, then fades out after 1 sec.

Problems:

-1- There are many article containers & popup divs sharing the same class so all popups appear if only 1 title is hovered.

-2- I've tried this and similar solutions:

(function ($) {
    $(document).ready(function(){
        $('.field-title').bind('mouseenter', function() {
        $('.article_popup').fadeIn();
        });
        $('.field-title').bind('mouseleave', function() {
        $('.article_popup').fadeOut();
        });
    });
}(jQuery));

But this doesn't cover the case where user hovers over the popup itself.

update: http://jsfiddle.net/zThP7/14/

Here is my HTML (as you can see there many nested divs with the same classes):

<div class="container_block">
<table class="container_table">
    <tbody>
          <tr class="row-1">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>          
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                   </td>
          </tr>
          <tr class="row-2">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
          </tr>
          <tr class="row-3">
                  <td class="col-1">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
                  <td class="col-2">
                        <div class="field-title"><span class="field-content"><a href="#">Lorem Ipsum</a></span></div>  
                        <div class="article_popup_container">
                            <div class="field-content">
                                <div class="article_popup">
                                    <div class="article_popup_photo"><a href="#"><img src="http://image_path"/></a></div>
                                    <div class="article_popup_text">Lorem Ipsum</div>
                                </div>
                            </div>  
                        </div>        
                  </td>
          </tr>
      </tbody>
</table>

I prefer this to be solved with custom code, not a suggested jquery plugin but if it get's too complicated, a functional & cross-browser compatible plugin would be OK.

Not 100% following what your problem is, if you throw your code in a [jsfiddle](http://jsfiddle.net), that might help. I think what you're looking for is instead of `$('.article_popup')`, use `$(this).find('.article_popup')` — swider, Jul 01 '12 at 12:21
I added http://jsfiddle.net/zThP7/14/ to my initial question. The addition you suggest doesn't work for some reason... — Mario, Jul 01 '12 at 12:41

score 1 · Accepted Answer · answered Jul 01 '12 at 12:53

1

You'll want to move the popover inside the same container so you only have to deal with one element's mouseout. Check the first one, it will at least give you a starting point. http://jsfiddle.net/zThP7/15/

answered Jul 01 '12 at 12:53

swider

3,374
2
27
40

Thank you, that did the job. Taking this a couple of steps further, how can I make the popup follow the mouse cursor + also make the popup process stop in case another popup is triggered? You can see an example of thefunctionality I'm looking for here: http://www.lesvosreport.gr (below slideshow, right articles' columns, next to the sidebar). – Mario Jul 01 '12 at 15:16
nice solution for dynamic fade in fade out – MSTdev Mar 11 '14 at 07:15

score 0 · Answer 2 · edited May 23 '17 at 10:09

0

I think this is what you're searching for ;)

https://stackoverflow.com/a/1670561/472406

The only thing you need to change is to add the mouseenter event for you popup element and clear the timeout and for the mouseleave of the popup add a timeout to hide the popup

Since in title element you will have to clear the timeout if the user goes from the popup to the title the popup won't disappear

edited May 23 '17 at 10:09

Community

1
1

answered Jul 01 '12 at 12:57

PHP lover

238
2
11

Thank you for your answer - I tried swider's approach and it seems to be going somewhere - I'll try your suggestion if I face any problems in the current solution I'm using. – Mario Jul 01 '12 at 15:19

hover over one div, another div fades in and remains visible while user hovers over it

2 Answers2