Databases
StackOverflow2013
Postsdbo
POHover over element changes element which is then included in hover over
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover over element changes element which is then included in hover over
    text
    copied!<p>Excuse the phrasing of the title but it was kind of hard to sum up.</p> <p>This is what I want to do</p> <pre><code>&lt;div id="test"&gt;Test&lt;/div&gt; &lt;div id="example1" style="display:none;"&gt;Test&lt;/div&gt; &lt;div id="example2" style="display:none;"&gt;Test&lt;/div&gt; </code></pre> <p>When <code>#test</code> is hovered over, it causes <code>#example1</code> and <code>#exmaple2</code> to become visible and then when hovering discontinues, <code>#example1</code> and <code>#exmaple2</code> return to being invisible again.</p> <p>Simple code obviously.</p> <pre><code>$('#test').hover( function () { $('#example1,#example2').show(); }, function () { $('#example1,#example2').hide(); } ); </code></pre> <p>Now here's the dilemma. I need <code>#example1</code> and <code>#exmaple2</code> to remain visible when hovered over, this is not possible because when the mouse leaves <code>#test</code> to go hover over <code>#example1</code> or <code>#example2</code>, they go back to being invisible, as the code above instructs it to do. How can I make this possible?</p> <p>I understand wrapping the elements together like this</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="test"&gt;Test&lt;/div&gt; &lt;div id="example1" style="display:none;"&gt;Test&lt;/div&gt; &lt;div id="example2" style="display:none;"&gt;Test&lt;/div&gt; &lt;/div&gt; </code></pre> <p>and changing the code to</p> <pre><code>$('#wrapper').hover( function () { $('#example1,#example2').show(); }, function () { $('#example1,#example2').hide(); } ); </code></pre> <p>would fix this, but I'm not able to do so because in my actual code, <code>#test</code> is already under a wrapper, a wrapper that has a very specific design associated with it that would be destroyed if I included <code>#example1</code> and <code>#example2</code> in it.</p> <p>To sum up the above, my question is: When <code>#test</code> is hovered over and <code>#example1</code> and <code>#example2</code> become visible, how can I keep <code>#example1</code> and <code>#example2</code> visible even when leaving <code>#test</code> to hover over <code>#example1</code> and <code>#example2</code>?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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