How to write javascript on Drupal with drupal.behaviours

Question

I have a grid that contains two rows and three columns. Each column has a picture, a title, and a subtitle. All the pictures have the same class, let's say "image".I want the picture to change during hover. I have a div with the other image (the one that I want to show on hover) with the property display: none;

This is the HTML code:

<div class="row-1">
    <div class="col-1">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="../.." al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="../.." al="">
            </div>
        </div>
     </div>
     <div class="col-2">
     </div>
     <div class="col-3">
     </div>
</div>

This is the js code:

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.hoverEffect = {
    attach: function (context, settings) {

      $('.view-field-image .field-content', context)
        .once()
        .each( function () {
          $(this, context)
          .mouseenter( function () {
            console.log('enter');
            $('image', context).css('display', 'none');
            $('.collapsed', context).css('display', 'block');
          })
          .mouseleave( function () {
            console.log('leave');
            $('image', context).css('display', 'block');
            $('.collapsed', context).css('display', 'none');
          });
        });
    }
  };

})(jQuery, Drupal);

I don't have the excepted result. When I hover over the picture all the pictures show the hidden picture with the collapsed class. Furthermore the picture with the class= "image" doesn't disappear.

Answer 1

After playing around with the javascript for a while, I realised you could simple do this with CSS, no Javascript needed.

You will just have to add a class to the columns, in the case of this example it is image-col.

.image-col {
  width: 200px;
  height: 100px;
  position: relative;
}
.image-col > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.image-col img {
  width: 100%;
  height: 100%;
}
.image-col .view-field-image {
  z-index: 10;
}
.image-col .view-field-collapsed {
  z-index: 1;
}
.image-col:hover .view-field-image {
  display: none;
}

<div class="row-1">
    <div class="col-1 image-col">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="https://searchengineland.com/figz/wp-content/seloads/2015/09/google-logo-green2-1920.jpg" al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="https://searchengineland.com/figz/wp-content/seloads/2015/11/google-stars-reviews-rankings5-ss-1920.png" al="">
            </div>
        </div>
     </div>
     <div class="col-2 image-col">
     </div>
     <div class="col-3 image-col">
     </div>
</div>

---

After posting this I saw that the problem is probably more than the way the context variable is being used.

But I am leaving the answer here on request of the OP.

Original (wrong) answer

You are using the context variable wrong.
context will be what jquery looks into to find an element.
eg.
$('.something', context)
jquery will search for ".something" inside of context.

Your code uses: $('image', context).css('display', 'none'); but, as this is in a loop, you really only want the context to be the current element in the loop.
So your each loop should loop more like:

.each( function (index, element) {
  let $this = $(this);
  .mouseenter( function () {
    // Search for image in the current looping element.
    $('image', $this).css('display', 'none');
    // Search for all collapsed
    $('.collapsed', context).css('display', 'block');
  })

Answer 2

       (function ($, Drupal, drupalSettings) {

            Drupal.behaviors.YOURBEHAVIOR = {

                attach: function (context, settings) {

                    $('.YOURCLASS', context).on('YOUREVENT', function () {

                alert('TEST STRING...');  //Your javascript code...
                $('.YOURCLASS').addClass('ADD THE CLASSES HERE...');

                });

                }
            };
        })(jQuery, Drupal, drupalSettings);