Сделайте его видимым, если: наведите курсор и держите его таким образом после выхода мыши, но разряжайте, если другой элемент наведен

---

i have a slideshow and I want #avada #admired #runner  become visible and stay visible when #a:hover but if #b hover the first 3 images become hidden and #tin #tin-2 #tin-3 become visible and stay visible until either #a or #c:hover and so on.

my situation: when i hover #a, #avada ,#admired and # runner become visible and stay visible after mouse-out (which is good ) but if  #b:hover the first 3 images wont become hidden (the problem)(i want the first 3 images to hide so 3 new images related to #b become visible)

Хоупфулли мог ясно сказать, в чем проблема.

Спасибо Вам за вашу помощь ;)

Что я уже пробовал:

   <div class="layout layout-home">
  <div class="home-nav one-half">
    <ul class="home-menu one-half">
    <li id="a">hi</li>
      <li id="b">hi-2</li>
       <li id="c">hi-5</li>
     </ul>
 </div>

<div class="home-slideshow">
   <div class="works">
     <div class="admired full-width">
        <img id="admired" src="images/admired.jpg">
     </div>
    <div class="avada full-width">
        <img id="avada" src="images/avada.jpg">
    </div>
    <div class="runner full-width">
        <img id="runner" src="images/runner.png">
    </div>
  </div>
</div>
  <div class="works-2">
     <div class="tin full-width">
         <img id="tin" src="#">
     </div>
     <div class="tin-2 full-width">
         <img id="tin-2" src="#">
     </div>
     <div class="tin-3 full-width">
         <img id="tin-3" src="#">
     </div>
 </div>

<script>
$(function() {
$('#a').hover(function() {
$('#admired , #avada, #runner').css('opacity', '1');
}
function() {
$('#admired,#avada, #runner').css('opacity', '1');

});
});

(function() {
$('#b').hover(function() {
$('#tin,#tin-2,#tin-3').css('opacity', '1');
}, function() {
$('#tin,#tin-2,#tin-3').css('opacity', '1');
});
});
</script>

---