Databases
StackOverflow2013
Postsdbo
POhover over one div, another div fades in and remains visible while user hovers over it
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhover over one div, another div fades in and remains visible while user hovers over it
    primarykey
    data
    text
    <p>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 &amp; "outside" of the container div) which contains the article's image and trimmed text.</p> <p>What I want: User hovers over article's title:</p> <pre><code>&lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; </code></pre> <p>As a result, the popup</p> <pre><code>&lt;div class="article_popup"&gt; </code></pre> <p>fades in next to the article's title container.</p> <p>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.</p> <p>Problems:</p> <p>-1- There are many article containers &amp; popup divs sharing the same class so all popups appear if only 1 title is hovered.</p> <p>-2- I've tried this and similar solutions: </p> <pre><code>(function ($) { $(document).ready(function(){ $('.field-title').bind('mouseenter', function() { $('.article_popup').fadeIn(); }); $('.field-title').bind('mouseleave', function() { $('.article_popup').fadeOut(); }); }); }(jQuery)); </code></pre> <p>But this doesn't cover the case where user hovers over the popup itself.</p> <p>update: <a href="http://jsfiddle.net/zThP7/14/" rel="nofollow">http://jsfiddle.net/zThP7/14/</a></p> <p>Here is my HTML (as you can see there many nested divs with the same classes):</p> <pre><code>&lt;div class="container_block"&gt; &lt;table class="container_table"&gt; &lt;tbody&gt; &lt;tr class="row-1"&gt; &lt;td class="col-1"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="col-2"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="row-2"&gt; &lt;td class="col-1"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="col-2"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="row-3"&gt; &lt;td class="col-1"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;td class="col-2"&gt; &lt;div class="field-title"&gt;&lt;span class="field-content"&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; &lt;div class="article_popup_container"&gt; &lt;div class="field-content"&gt; &lt;div class="article_popup"&gt; &lt;div class="article_popup_photo"&gt;&lt;a href="#"&gt;&lt;img src="http://image_path"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="article_popup_text"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p></p> <p>I prefer this to be solved with custom code, not a suggested jquery plugin but if it get's too complicated, a functional &amp; cross-browser compatible plugin would be OK.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMario
    1. USMario
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CONot 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')`
      singulars
      1. POhover over one div, another div fades in and remains visible while user hovers over it
      1. USswider
    2. COI added http://jsfiddle.net/zThP7/14/ to my initial question. The addition you suggest doesn't work for some reason...
      singulars
      1. POhover over one div, another div fades in and remains visible while user hovers over it
      1. USMario
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload