CODEWITHSUNDEEP
jquerycss
San
San

Reputation: 1247

On hover swap images

I have 2 dropdowns namely NEW & SHOP

when I hover over the New Menu 1, it should show the related image and same when I hover over New Menu 2 it should show the related image in a div which has a class ".menu-viewer".

Right now this works, but it changes the image of the shop menu also.

Also, the default image for the shop is not shown by default.

Please refer the Fiddle I have created and tell me what am I doing wrong.

I hope I have explained my problem clearly. As it sounds a little confusing, please feel free to ask me.

https://jsfiddle.net/cancerian73/qwtono6c/

 var $img = $('.menu-viewer  img'),
 dsrc = $img.attr('src');
 $('.menu-list ul li a').hover(function() {
 var $this = $(this).addClass('hover');
  $img.attr('src', $this.data('image'));
 }, function() {
 $(this).removeClass('hover');
$img.attr('src', dsrc);
 });


 $('.menu-list ul li').bind('mouseenter focusin',function() {
 $($(this).attr('href')).show();
 }).bind('mouseleave focusout',function() {
 $($(this).attr('href')).hide();
 });

Upvotes: 1

Views: 96

Answers (2)

Pete
Pete

Reputation: 58462

You need to change the image within the current block. In the following I have used jQuery closest to get the closest ancestor megamenu and changed the image based on that:

$('.menu-list ul li a').hover(function() {
  var $this = $(this).addClass('hover'),
    $img = $this.closest('.megamenu').find('.menu-viewer  img');
    
  $this.data('original', $img.attr('src'));
  $img.attr('src', $this.data('image'));
}, function() {
  var $this = $(this),
    $img = $this.closest('.megamenu').find('.menu-viewer  img');
  
  $this.removeClass('hover');
  $img.attr('src', $this.data('original'));
});
ul {
  list-style: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="javascript:void(0)">NEW MENU</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-4">
              <div class="menu-list">
                <ul>
                  <li id="menulist1"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 1">NEW MENU 1</a></li>
                  <li id="menulist2"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 2</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer"><img src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
<li>
  <a href="javascript:void(0)">Shop</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-2">
              <div class="menu-list">
                <ul>
                  <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 1">SHOP 1</a></li>
                  <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 2">SHOP 2</a></li>
                  <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 3">SHOP 3</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer">
                <img src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>

Edit as per comments

$('.menu-list ul li a').hover(function() {
  var $this = $(this).addClass('hover'),
    $images = $this.closest('.megamenu').find('.menu-viewer  img');

  $images.eq(0).addClass('hidden');
  $images.eq(1).attr('src', $this.data('image')).removeClass('hidden');

}, function() {
  var $this = $(this),
    $images = $this.closest('.megamenu').find('.menu-viewer  img');
    
  $images.eq(1).addClass('hidden');
  $images.eq(0).removeClass('hidden');
});
ul {
  list-style: none
}

.menu-viewer {
  position: relative;
}

.hidden {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

img {
  position: relative;
  opacity: 1;
  transition: opacity 0.75s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="javascript:void(0)">NEW MENU</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-4">
              <div class="menu-list">
                <ul>
                  <li id="menulist1"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 1">NEW MENU 1</a></li>
                  <li id="menulist2"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 2</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer"><img src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" />
                <img class="hidden" src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
<li>
  <a href="javascript:void(0)">Shop</a>
  <div class="megamenu clearfix">
    <div class="grid-container">
      <div class="grid-x align-center align-middle">
        <div class="cell small-8 shrink">
          <div class="grid-x">
            <div class="cell small-2">
              <div class="menu-list">
                <ul>
                  <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 1">SHOP 1</a></li>
                  <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 2">SHOP 2</a></li>
                  <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 3">SHOP 3</a></li>
                </ul>
              </div>
            </div>
            <div class="cell small-8">
              <div class="menu-viewer">
                <img src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
                <img class="hidden" src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

Upvotes: 1

Scaramouche
Scaramouche

Reputation: 3267

You could try reaching out for help with css, also included an index variable in case you add more images in the future. Notice this relies on every anchor having an id of the form menulist + <number>. Also I made it so that when you hover out of the link, the menu img does not switch back to the previous state, dunno if that goes against your desired behavior but it seemed more natural this way

Give it a go

$('.menu-list ul li a').mouseenter(function() {
    var $this = $(this).addClass('hover');
    var index = $this.parent().attr('id').match(/menulist(.+)/)[1];
    
    $this.closest('.cell').siblings('.small-8:first').find('img:nth-child('+index+')').addClass('active').siblings('img').removeClass('active');
     
  });
ul{list-style:none}

img.cruise-coll{
  display: none
}

img.cruise-coll.active{
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
   <a href="javascript:void(0)">NEW MENU</a>
   <div class="megamenu clearfix">
      <div class="grid-container">
         <div class="grid-x align-center align-middle">
            <div class="cell small-8 shrink">
               <div class="grid-x">
                  <div class="cell small-4">
                     <div class="menu-list">
                        <ul>
                           <li id="menulist1"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 1">NEW MENU 1</a></li>
                           <li id="menulist2"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 2</a></li>
                           <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 3</a></li>
                           <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 4</a></li>
                           <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=NEW MENU 2">NEW MENU 5</a></li>
                        </ul>
                     </div>
                  </div>
                  <div class="cell small-8">
                     <div class="menu-viewer">
                     <img class="cruise-coll active" src="http://via.placeholder.com/350x150?text=NEW MENU 1" alt="Cruise Collection"/>
                     <img class="cruise-coll" src="http://via.placeholder.com/350x150?text=NEW MENU 2" alt="Cruise Collection"/>
                     <img class="cruise-coll" src="http://via.placeholder.com/350x150?text=NEW MENU 3" alt="Cruise Collection"/>
                     <img class="cruise-coll" src="http://via.placeholder.com/350x150?text=NEW MENU 4" alt="Cruise Collection"/>
                     <img class="cruise-coll" src="http://via.placeholder.com/350x150?text=NEW MENU 5" alt="Cruise Collection"/></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>
<li>
   <a href="javascript:void(0)">Shop</a>
   <div class="megamenu clearfix">
      <div class="grid-container">
         <div class="grid-x align-center align-middle">
            <div class="cell small-8 shrink">
               <div class="grid-x">
                  <div class="cell small-2">
                     <div class="menu-list">
                        <ul>
                           <li id="menulist3"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 1">SHOP 1</a></li>
                           <li id="menulist4"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 2">SHOP 2</a></li>
                           <li id="menulist5"><a href="javascript:void(0)" data-image="http://via.placeholder.com/350x150?text=SHOP 3">SHOP 3</a></li>
                        </ul>
                     </div>
                  </div>
                  <div class="cell small-8">
                     <div class="menu-viewer">
                        <img src="http://via.placeholder.com/350x150?text=SHOP1" alt="Cruise Collection">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</li>
</ul>

Upvotes: 0

Related Questions