Databases
StackOverflow2013
Postsdbo
POAvoid fluttering on mouse hover
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAvoid fluttering on mouse hover
    text
    copied!<p>I am trying to make a left nav menu for my web page, which is to look something like the following image:</p> <p>Here is the jsfiddle of the problem I am facing. <a href="http://jsfiddle.net/rzr4Z/" rel="nofollow">http://jsfiddle.net/rzr4Z/</a></p> <p>My html looks like the following</p> <pre class="lang-html prettyprint-override"><code>&lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="#first-page" id="first_id"&gt;First&lt;/a&gt;&lt;img src="images/navbar-icons/first.png" /&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#second-page" id="second_id"&gt;Second&lt;/a&gt;&lt;img src="images/navbar-icons/second.png" /&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#third-page" id="third_id"&gt;Third&lt;/a&gt;&lt;img src="images/navbar-icons/third.png" /&gt; &lt;img src="images/navbar-icons/third.png" /&gt; &lt;ul id="side-menu"&gt; &lt;li&gt;&lt;img src="images/navbar-icons/submenu-img.png" alt="sub menu image" /&gt; &lt;/li&gt; &lt;li&gt;Sub-menu item 1&lt;/li&gt; &lt;li&gt;Sub-menu item 2&lt;/li&gt; &lt;li&gt;Sub-menu item 1&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="fourth-page" id="fourth_id"&gt;Fourth&lt;/a&gt;&lt;img src="images/navbar-icons/fourth.png" /&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS:</strong></p> <pre class="lang-css prettyprint-override"><code>ul#nav { list-style-type: none; margin: 10px 0; padding: 0; text-align: center; } ul#nav li { font-size: 250%; line-height: 25px; padding: 7px 0; margin: 0; } ul#nav li a { display: block; } ul#nav li a:link,ul#nav li a:visited { color: #333333; text-decoration: none; } ul#nav li a:hover,ul#nav li a:active { color: #a61607; text-decoration: none; } ul#nav li img { display: none; } ul#nav a:hover#first_id+img { display: block; position: relative; top: -25px; } ul#nav a:hover#second_id+img { display: block; position: relative; top: -25px; } ul#nav a:hover#third_id+img { display: block; position: relative; top: -25px; } ul#nav a:hover#fourth_id+img { display: block; position: relative; top: -25px; } ul#nav li ul#side-menu { display: none; position: absolute; } ul#nav li:hover ul#side-menu { font-size: 30%; list-style-type: none; line-height: 2px; color: #a61607; text-decoration: none; display: block; position: absolute; top: 310px; left: 250px; } ul#nav li:hover ul#side-menu li { float: none; } ul#nav li:hover ul#side-menu li img { position: absolute; top: 400px; left: 0px; } </code></pre> <p>Instead of doing something like,</p> <pre class="lang-css prettyprint-override"><code>ul#nav a:hover+img { display: block; position: relative; top: -25px; } </code></pre> <p>I had to use different ID's for each of the li elements in the css because each of the rollover image has a different size and width so that I could adjust them individually for their correponding rollover positions. Is using different ID's for each of the menu items the right way to get the desired effect?</p> <p>The main problem however is when I hover the images for each of the menu items, I start getting a fluttering effect, and the hover effect doesn't look easy to the eyes with that kind of fluttering. The images for the sub-menu (the sub-menu items do appear, but the img doesn't appear) also doesn't appear when hovering over <code>#third-page</code> menu item.</p> <p>Any suggestions on how to resolve this fluttering, and getting the correct effects for this menu?</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