Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to aim at the next <ul> list item in an <ul> with jquery?
    primarykey
    data
    text
    <p>I want to dynamically show the next <code>&lt;ul&gt;</code> list item on a mouseenter over the first <code>&lt;li&gt;</code> item. The first part of the script works as expected, the animation of the next list item in the first list. However I have no function on showing the next <code>&lt;ul&gt;</code>. Any tips would be of great help.</p> <p>You can see the so far working script here: <a href="http://liebdich.biz/test/test.php" rel="nofollow">http://liebdich.biz/test/test.php</a>.</p> <p>Here is the code</p> <pre><code>&lt;head&gt; &lt;style&gt; .masteringtext { height:262px; width:355px; background:grey; overflow:hidden; position:relative; } .masteringtext ul { list-style:none; padding:0; margin:0; cursor:pointer; } .masteringtext ul li { display:inline-block; background:#c3c3c3; border:solid 1px black; border-radius:5px; padding:1px; } .overlay { margin-left:-30px; } .profile { position:absolute; top:20px; left:0; top:25px; display:none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="masteringtext"&gt; &lt;ul&gt; &lt;li&gt;Equipment&lt;/li&gt; &lt;li class="overlay"&gt;Kosten&lt;/li&gt; &lt;li class="overlay"&gt;Referenzen &lt;ul class="profile"&gt; &lt;li&gt;Dies ist ein Test&lt;br&gt; um darzustellen was schon lange nötig war&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="overlay"&gt;Ablauf einer Bestellung&lt;/li&gt; &lt;li class="overlay"&gt;Tips für Mixe&lt;/li&gt; &lt;li class="overlay"&gt;Faq&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;script&gt; jQuery(document).ready(function(){ var overlay = $('li'); overlay.mouseenter(function() { $(this).next().animate({'margin-left':0},400, function() { $(this).next('ul').show(); }); }); overlay.mouseleave(function() { $(this).next().animate({'margin-left':-30}); }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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