So I have a mountain of mouseenter and mouseleave requests, and I was wondering if there was a way to refactor it.

jQuery code

// product features

  // highly interactive

  $('.highly-interactive').mouseenter( function() {

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.highly-interactive').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

  });



  // operating system

  $('.operating-system').mouseenter( function() {

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.operating-system').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

  });



  // batteries

  $('.batteries').mouseenter( function() {

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.batteries').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

  });



  // hypoallergenic

  $('.hypoallergenic').mouseenter( function() {

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.hypoallergenic').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();

  });



  // compatible tablet sizes

  $('.compTablet').mouseenter( function() {

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.compTablet').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

  });



  // genuine personality

  $('.genuine-personality').mouseenter( function() {

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.genuine-personality').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

  });



  // size

  $('.size').mouseenter( function() {

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.size').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

  });



  // soft and safe

  $('.soft-and-safe').mouseenter( function() {

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.soft-and-safe').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

  });



  // expanding app

  $('.expanding-app').mouseenter( function() {

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.expanding-app').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

  });

Currently, there is a delay when hiding .main-image the image that is supposed to show is showing behind it even though display: none; is being set on the .main-image

So the code seems to be doing what it should there's just a delay in the main-image being hidden which is happening to all of the above queries.

Update

HTML

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

This is only two section, but there is an image for every section and every section is laid out the same.

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS: .feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

How would I handle the hiding of the main image and showing of the relevant image @Andreas all images are in a separate class i.gyazo.com/96bb7e2d882c2598a61b02f8412d582d.png

– B.J.B
Jan 1 at 13:54

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class): $(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This would be a proper candidate for: codereview.stackexchange.com (but have a look at the help before posting)

– Andreas
Jan 1 at 14:01

There seems to be an error in your solution @Andreas i.gyazo.com/721557a9f393d0c195ff75e6fe45c348.png as far as I can tell everything is closed. Thanks for the codereview link

– B.J.B
Jan 1 at 14:24

|
show 2 more comments

So I have a mountain of mouseenter and mouseleave requests, and I was wondering if there was a way to refactor it.

jQuery code

// product features

  // highly interactive

  $('.highly-interactive').mouseenter( function() {

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.highly-interactive').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

  });



  // operating system

  $('.operating-system').mouseenter( function() {

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.operating-system').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

  });



  // batteries

  $('.batteries').mouseenter( function() {

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.batteries').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

  });



  // hypoallergenic

  $('.hypoallergenic').mouseenter( function() {

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.hypoallergenic').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();

  });



  // compatible tablet sizes

  $('.compTablet').mouseenter( function() {

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.compTablet').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

  });



  // genuine personality

  $('.genuine-personality').mouseenter( function() {

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.genuine-personality').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

  });



  // size

  $('.size').mouseenter( function() {

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.size').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

  });



  // soft and safe

  $('.soft-and-safe').mouseenter( function() {

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.soft-and-safe').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

  });



  // expanding app

  $('.expanding-app').mouseenter( function() {

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.expanding-app').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

  });

Currently, there is a delay when hiding .main-image the image that is supposed to show is showing behind it even though display: none; is being set on the .main-image

So the code seems to be doing what it should there's just a delay in the main-image being hidden which is happening to all of the above queries.

Update

HTML

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

This is only two section, but there is an image for every section and every section is laid out the same.

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS: .feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

How would I handle the hiding of the main image and showing of the relevant image @Andreas all images are in a separate class i.gyazo.com/96bb7e2d882c2598a61b02f8412d582d.png

– B.J.B
Jan 1 at 13:54

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class): $(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This would be a proper candidate for: codereview.stackexchange.com (but have a look at the help before posting)

– Andreas
Jan 1 at 14:01

There seems to be an error in your solution @Andreas i.gyazo.com/721557a9f393d0c195ff75e6fe45c348.png as far as I can tell everything is closed. Thanks for the codereview link

– B.J.B
Jan 1 at 14:24

|
show 2 more comments

So I have a mountain of mouseenter and mouseleave requests, and I was wondering if there was a way to refactor it.

jQuery code

// product features

  // highly interactive

  $('.highly-interactive').mouseenter( function() {

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.highly-interactive').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

  });



  // operating system

  $('.operating-system').mouseenter( function() {

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.operating-system').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

  });



  // batteries

  $('.batteries').mouseenter( function() {

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.batteries').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

  });



  // hypoallergenic

  $('.hypoallergenic').mouseenter( function() {

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.hypoallergenic').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();

  });



  // compatible tablet sizes

  $('.compTablet').mouseenter( function() {

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.compTablet').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

  });



  // genuine personality

  $('.genuine-personality').mouseenter( function() {

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.genuine-personality').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

  });



  // size

  $('.size').mouseenter( function() {

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.size').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

  });



  // soft and safe

  $('.soft-and-safe').mouseenter( function() {

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.soft-and-safe').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

  });



  // expanding app

  $('.expanding-app').mouseenter( function() {

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.expanding-app').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

  });

Currently, there is a delay when hiding .main-image the image that is supposed to show is showing behind it even though display: none; is being set on the .main-image

So the code seems to be doing what it should there's just a delay in the main-image being hidden which is happening to all of the above queries.

Update

HTML

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

This is only two section, but there is an image for every section and every section is laid out the same.

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

So I have a mountain of mouseenter and mouseleave requests, and I was wondering if there was a way to refactor it.

jQuery code

// product features

  // highly interactive

  $('.highly-interactive').mouseenter( function() {

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.highly-interactive').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

  });



  // operating system

  $('.operating-system').mouseenter( function() {

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.operating-system').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

  });



  // batteries

  $('.batteries').mouseenter( function() {

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.batteries').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

  });



  // hypoallergenic

  $('.hypoallergenic').mouseenter( function() {

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.hypoallergenic').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();

  });



  // compatible tablet sizes

  $('.compTablet').mouseenter( function() {

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.compTablet').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

  });



  // genuine personality

  $('.genuine-personality').mouseenter( function() {

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.genuine-personality').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

  });



  // size

  $('.size').mouseenter( function() {

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.size').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

  });



  // soft and safe

  $('.soft-and-safe').mouseenter( function() {

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.soft-and-safe').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

  });



  // expanding app

  $('.expanding-app').mouseenter( function() {

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

  });



  $('.expanding-app').mouseleave( function() {

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

  });

Currently, there is a delay when hiding .main-image the image that is supposed to show is showing behind it even though display: none; is being set on the .main-image

So the code seems to be doing what it should there's just a delay in the main-image being hidden which is happening to all of the above queries.

Update

HTML

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

This is only two section, but there is an image for every section and every section is laid out the same.

jquery refactoring

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

edited Jan 1 at 14:58

asked Jan 1 at 13:08

B.J.B

152213

asked Jan 1 at 13:08

B.J.B

152213

asked Jan 1 at 13:08

B.J.B

152213

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS: .feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

How would I handle the hiding of the main image and showing of the relevant image @Andreas all images are in a separate class i.gyazo.com/96bb7e2d882c2598a61b02f8412d582d.png

– B.J.B
Jan 1 at 13:54

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class): $(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This would be a proper candidate for: codereview.stackexchange.com (but have a look at the help before posting)

– Andreas
Jan 1 at 14:01

There seems to be an error in your solution @Andreas i.gyazo.com/721557a9f393d0c195ff75e6fe45c348.png as far as I can tell everything is closed. Thanks for the codereview link

– B.J.B
Jan 1 at 14:24

|
show 2 more comments

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS: .feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

How would I handle the hiding of the main image and showing of the relevant image @Andreas all images are in a separate class i.gyazo.com/96bb7e2d882c2598a61b02f8412d582d.png

– B.J.B
Jan 1 at 13:54

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class): $(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This would be a proper candidate for: codereview.stackexchange.com (but have a look at the help before posting)

– Andreas
Jan 1 at 14:01

There seems to be an error in your solution @Andreas i.gyazo.com/721557a9f393d0c195ff75e6fe45c348.png as far as I can tell everything is closed. Thanks for the codereview link

– B.J.B
Jan 1 at 14:24

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS:

.feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }

; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

Why all the JavaScript? Add a common class to every product feature (e.g. .feature) and use CSS:

.feature .hover { display: none } .feature h2 { color: #1a2d45 } .feature:hover .hover { display: block } .feature:hover h2 { color: #15d4ef }

; If you then can make the ...-image element also a child of the feature or a common element like .main-image you can do all with pure CSS.

– Andreas
Jan 1 at 13:40

How would I handle the hiding of the main image and showing of the relevant image @Andreas all images are in a separate class i.gyazo.com/96bb7e2d882c2598a61b02f8412d582d.png

– B.J.B
Jan 1 at 13:54

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class):

$(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This you would then have to do with JavaScript but with way less code (may need some tweaking on the className part to get the correct class):

$(".feature").on("mouseenter", function() { $(this.className.replace(/s*features*/g,"") + "-image").show(); $(".main-image").hide(); }).on("mouseleave", function() { $(this.className.replace(/s*features*/g,"")) + "-image").hide(); $(".main-image").show(); });

– Andreas
Jan 1 at 13:58

This would be a proper candidate for: codereview.stackexchange.com (but have a look at the help before posting)

– Andreas
Jan 1 at 14:01

There seems to be an error in your solution @Andreas i.gyazo.com/721557a9f393d0c195ff75e6fe45c348.png as far as I can tell everything is closed. Thanks for the codereview link

– B.J.B
Jan 1 at 14:24

|
show 2 more comments

2 Answers
2

active

oldest

votes

If you add a custom attribute to the feature sections then you can greatly simplify your code.

I have added feature="highly-interactive" (or the equivalent) to each of the feature sections. The code then pulls this attribute out one mousenter or mouseleave. With you consistent naming structure you can then append -image to show/hide the correct feature image.

The highlighting of the heading can be done in CSS.

Demo

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

add a comment |

You can minimize your code at best way below. As hover in & out is as mouseenter and mouseleave

You can further minimize it, but for that you need to share your html structure, so we can make a generalized script for all the mouseenter and mouseleave events.

$('.highly-interactive').hover(function(){

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

});



$('.operating-system').hover(function(){

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

});



$('.batteries').hover(function(){

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

});



$('.hypoallergenic').hover(function(){

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();





$('.compTablet').hover(function(){

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

});





$('.genuine-personality').hover(function(){

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

});





$('.size').hover(function(){

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

});



$('.soft-and-safe').hover(function(){

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

});



$('.expanding-app').hover(function(){

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

});

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995691%2frefactor-jquery-to-minimize-delay%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

If you add a custom attribute to the feature sections then you can greatly simplify your code.

The highlighting of the heading can be done in CSS.

Demo

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

add a comment |

If you add a custom attribute to the feature sections then you can greatly simplify your code.

The highlighting of the heading can be done in CSS.

Demo

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

add a comment |

If you add a custom attribute to the feature sections then you can greatly simplify your code.

The highlighting of the heading can be done in CSS.

Demo

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

If you add a custom attribute to the feature sections then you can greatly simplify your code.

The highlighting of the heading can be done in CSS.

Demo

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

// Add event for mouse entering a feature

$( ".feature" ).mouseenter(function() {

    

    // Get feature name, append '-image' and show

    $("." + $(this).attr("feature") + "-image").show();

    

    // Hide the main image

    $('.main-image').hide();

    

});





// Add event for mouse leaving a feature

$( ".feature" ).mouseleave(function() {

    

    // Get feature name, append '-image' and hide

    $("." + $(this).attr("feature") + "-image").hide();

    

    // Show the main image

    $('.main-image').show();

    



});

.feature:hover h2 {

  color: #15d4ef;

}



.images img {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="./images/product-features-default.png" alt="plush" class="main-image">



<section class="images">

  <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive-image">

  <img src="./images/tablet-sizesImage.png" alt="Tablet Sizes" class="operating-system-image">

  <img src="./images/batteryImage.png" alt="Batteries Images" class="batteries-image">

  <img src="./images/Hypoallergenic.png" alt="Hypoallergenic" class="hypoallergenic-image">

  <img src="./images/Octobo-Tablet.png" alt="Compatible Tablet Sizes" class="compTablet-image">

  <img src="./images/GenuinePersonality.png" alt="Genuine Personality" class="genuine-personality-image">

  <img src="./images/sizeImage.png" alt="Size" class="size-image">

  <img src="./images/soft&safe.png" alt="Soft & Safe" class="soft-and-safe-image">

  <img src="./images/Expanding.png" alt="Expanding App" class="expanding-app-image">

</section>



<!-- highly interactive -->

<section feature="highly-interactive" class="highly-interactive feature">

  <section class="text">

    <h2>Highly Interactive</h2>



    <section class="hover">

      <img src="./images/HIIcon.svg" class="icon">

      <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>

    </section>

  </section>

</section>



<!-- operating system -->

<section feature="operating-system" class="operating-system feature">

  <section class="text">

    <h2>Operating System</h2>



    <section class="hover">

      <img src="./images/tablet-sizes.svg" class="icon">

      <span>iOS 6.0, Android, 4.0 Ice Cream Sandwich and up</span>

      <img src="./images/operating-system.png" alt="Android and Apple logos" class="OS-logos">

    </section>

  </section>

</section>

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

answered Jan 1 at 15:05

Oliver Trampleasure

1,7111519

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

add a comment |

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

Hm doesn't seem to be showing the relevant image when hovering. the main image is hiding, but the img in the image's class doesn't show.

– B.J.B
Jan 1 at 15:22

You need to add feature="operating-system" to each of your wrapper sections (replace the name as appropriate - see just under the line  ). You could do a search on the class but this would mean you couldn't add any other classes. This approach is more versatile.

– Oliver Trampleasure
Jan 1 at 15:24

Oh I see, thanks.

– B.J.B
Jan 1 at 15:28

No problem, glad we could help

– Oliver Trampleasure
Jan 1 at 15:30

Instead of adding an invalid attribute use the class which is already there. Split the className and grab the non-feature one (or use .classlist).

– Andreas
Jan 1 at 16:58

add a comment |

You can minimize your code at best way below. As hover in & out is as mouseenter and mouseleave

You can further minimize it, but for that you need to share your html structure, so we can make a generalized script for all the mouseenter and mouseleave events.

$('.highly-interactive').hover(function(){

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

});



$('.operating-system').hover(function(){

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

});



$('.batteries').hover(function(){

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

});



$('.hypoallergenic').hover(function(){

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();





$('.compTablet').hover(function(){

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

});





$('.genuine-personality').hover(function(){

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

});





$('.size').hover(function(){

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

});



$('.soft-and-safe').hover(function(){

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

});



$('.expanding-app').hover(function(){

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

});

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

add a comment |

You can minimize your code at best way below. As hover in & out is as mouseenter and mouseleave

You can further minimize it, but for that you need to share your html structure, so we can make a generalized script for all the mouseenter and mouseleave events.

$('.highly-interactive').hover(function(){

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

});



$('.operating-system').hover(function(){

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

});



$('.batteries').hover(function(){

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

});



$('.hypoallergenic').hover(function(){

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();





$('.compTablet').hover(function(){

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

});





$('.genuine-personality').hover(function(){

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

});





$('.size').hover(function(){

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

});



$('.soft-and-safe').hover(function(){

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

});



$('.expanding-app').hover(function(){

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

});

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

add a comment |

You can minimize your code at best way below. As hover in & out is as mouseenter and mouseleave

You can further minimize it, but for that you need to share your html structure, so we can make a generalized script for all the mouseenter and mouseleave events.

$('.highly-interactive').hover(function(){

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

});



$('.operating-system').hover(function(){

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

});



$('.batteries').hover(function(){

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

});



$('.hypoallergenic').hover(function(){

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();





$('.compTablet').hover(function(){

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

});





$('.genuine-personality').hover(function(){

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

});





$('.size').hover(function(){

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

});



$('.soft-and-safe').hover(function(){

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

});



$('.expanding-app').hover(function(){

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

});

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

You can minimize your code at best way below. As hover in & out is as mouseenter and mouseleave

You can further minimize it, but for that you need to share your html structure, so we can make a generalized script for all the mouseenter and mouseleave events.

$('.highly-interactive').hover(function(){

    $('.highly-interactive-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.highly-interactive-image').hide();

    $('.main-image').show();

});



$('.operating-system').hover(function(){

    $('.operating-system-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.operating-system-image').hide();

    $('.main-image').show();

});



$('.batteries').hover(function(){

    $('.batteries-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.batteries-image').hide();

    $('.main-image').show();

});



$('.hypoallergenic').hover(function(){

    $('.hypoallergenic-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.hypoallergenic-image').hide();

    $('.main-image').show();





$('.compTablet').hover(function(){

    $('.compTablet-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.compTablet-image').hide();

    $('.main-image').show();

});





$('.genuine-personality').hover(function(){

    $('.genuine-personality-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.genuine-personality-image').hide();

    $('.main-image').show();

});





$('.size').hover(function(){

    $('.size-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.size-image').hide();

    $('.main-image').show();

});



$('.soft-and-safe').hover(function(){

    $('.soft-and-safe-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.soft-and-safe-image').hide();

    $('.main-image').show();

});



$('.expanding-app').hover(function(){

    $('.expanding-app-image').show();

    $('h2', this).css('color', '#15d4ef');

    $('.main-image').hide();

    $('.hover', this).show();

},function(){

    $('.hover', this).hide();

    $('h2', this).css('color', '#1A2D45');

    $('.expanding-app-image').hide();

    $('.main-image').show();

});

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

edited Jan 1 at 13:57

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

answered Jan 1 at 13:44

ElusiveCoder

1,2241220

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu

Refactor jQuery to minimize delay

2 Answers
2

Demo

Your Answer

Post as a guest

2 Answers
2

2 Answers
2

Demo

Demo

Demo

Demo

Post as a guest

Popular posts from this blog

Can a sorcerer learn a 5th-level spell early by creating spell slots using the Font of Magic feature?

ts Property 'filter' does not exist on type '{}'

mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

Category

Random preview

Refactor jQuery to minimize delay

2 Answers 2

Demo

Your Answer

Sign up or log in

Post as a guest

Post as a guest

2 Answers 2

2 Answers 2

Demo

Demo

Demo

Demo

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Can a sorcerer learn a 5th-level spell early by creating spell slots using the Font of Magic feature?

ts Property 'filter' does not exist on type '{}'

mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

2 Answers
2

2 Answers
2

2 Answers
2