Good day,
I've been trying to solve this problem for ages, but no luck so far. I couldn't find any information how to toggle img inside another div, when mouse hover div.

Scenario:
I have one big img let says width="600" height="400" and inside that div are two buttons which will show and hide according mouse position (when mouse is over photo then show navigation's buttons, when mouse is out then hide navigation's buttons).
To get better idea, one big img as a photo and on left side button as navigation "previous" and the same on right side.

I wrote code below, which works but keeps flipping whole time.

The problem is:
When nav. buttons appear it creates new class inside photo, which means that now we have two classes => two selectors instead of one. This behaviour causes flipping issue.

Would be great to solve this problem.

Thank you regiss

1. CSS
2. .buttons{ position: relative; top: -360px; z-index: 9999; height: 100px}
3. #next2{ margin-left: 770px}

1.  Html
2. <div class="slideshow">
3.         <img src="mail img" width="600" height="400">
4.  </div>

1. <div class="buttons">
2.         <a id="prev2" href="#">
3.             <img src="{$baseUri}images/template/prev.png" alt="previous img" border="0">
4.         </a>
5.         <a id="next2" href="#">
6.             <img src="{$baseUri}images/template/next.png" alt="next img" border="0">
7.         </a>
8.     </div>

1. Jquery
2.     $(".slideshow").hover(
3.       function () {
4.           $('.buttons').show().stop();
5.       },
6.       function () {
7.         $('.buttons').hide().stop();
8.       }
9.     );