hover works only when entering from outside of container IE <p>i saw many problems with IE but none was the same as mine. i have a gallery on my site, there are navigation arrows on each pic. i use hover to figure on which half of the picture the user hovers and to show the right arrow accordingly, the problem is that the hover works only when i enter the mouse from outside the div that contains the arrows, when i move form one arrow to another it dosent work. here the code: </p> <pre><code>&lt;div class="lb-container"&gt; &lt;img class="lb-image" src="http://suburbanfinance.com/wp-content/uploads/2013/04/streetinfo.jpg?973b8a" style="display: block; width: 724px; height: 543px;"&gt; &lt;div class="lb-nav" style="display: block;"&gt; &lt;a class="lb-prev" href="" style="display: block;"&gt;&lt;/a&gt; &lt;a class="lb-next" href="" style="display: block;"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="lb-loader" style="display: none;"&gt;&lt;a class="lb-cancel"&gt; &lt;/a&gt;&lt;/div&gt;&lt;/div&gt; </code></pre> <p>and the css: </p> <pre><code>.lb-next:hover { background: url(../images/next.png) right 48% no-repeat; } .lb-prev:hover { background: url(../images/prev.png) left 48% no-repeat; } </code></pre> <p>ideas? </p>