make it visibile if :hover and keep hover effect after mouse-out but discharge if another element is hovered

Question

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

 <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>

Answer 1

without a code from you, i made a simple example.

4 divs with h1 and p inside. i've hidden only the p ( with CSS )and the h1 is still visible so we can see where the divs are.

depending on your specific situation you can change the below code ( hide the whole divs using opacity,display or visibility or with JQ like slideToggle etc. )

next, i've made a JQ giving the div that is hovered a class show which i've styled in CSS. and also, on hover, removing the class show on every other div that has it except the one that is being hovered.

and so. if the first div has class show , when hover on the second div , it gives show to the second div, and removes the show class from the previous hovered one ( first div ) . so the first div gets hidden

let me know if this is what you are looking for. i repeat...this code can be changed depending on your specific situation

 $("div").hover(function(){ $(this).addClass('show') $(this).siblings().removeClass("show") }) 

 div p{ display:none} div.show p { display:block} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one"> <h1>ONE</h1> <p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p> </div> <div class="two"> <h1>Two</h1> <p> Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p> </div> <div class="three"> <h1>three</h1> <p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p> </div> <div class="four"> <h1>four</h1> <p>Lorem ipsum dolor sit amet, maecenas litora fugit cupiditate nunc vel vitae, consectetuer sollicitudin est, pede lectus rutrum non. Et duis pharetra, justo tempor id montes vitae at vulputate, cras risus ut aliquam risus augue, orci nibh quisque viverra ac ac eu, ac fermentum odio sit. Sodales in in. Mi dictum commodo quis pretium, lorem magna aliquet dui tempor. Orci sodales fusce elit voluptas tristique, congue dui laoreet et.</p> </div>