0

我有一个包含两行和三列的网格。每列都有一张图片、一个标题和一个副标题。所有图片都有相同的类，比如说“图像”。我希望图片在悬停期间改变。我有一个带有另一个图像（我想在悬停时显示的图像）的 div，其属性为 display: none;

这是 HTML 代码：

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

这是js代码：

(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);

我没有例外的结果。当我将鼠标悬停在图片上时，所有图片都显示带有折叠类的隐藏图片。此外，带有 class="image" 的图片不会消失。

4

2 回答 2

0

在玩了一段时间的 javascript 之后，我意识到你可以用 CSS 简单地做到这一点，不需要 Javascript。

您只需要在列中添加一个类，在本例中它是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>

发布此内容后，我发现问题可能不仅仅是使用上下文变量的方式。

但我应 OP 的要求将答案留在这里。

原始（错误）答案

您使用的上下文变量错误。
context 将是 jquery 查找元素的内容。
例如。
$('.something', context)
jquery 将在上下文中搜索“.something”。

您的代码使用： $('image', context).css('display', 'none');但是，由于这是在循环中，因此您实际上只希望上下文成为循环中的当前元素。
所以你的每个循环应该循环更像： 

.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');
  })
于 2019-08-27T23:12:34.760 回答
-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);
于 2019-08-28T08:34:24.100 回答