javascript - 图像淡入然后文本不起作用

Question

当我将鼠标放在图像上时，它应该会显示带有标题和一些描述的文本。此上下文仅适用于第一张图像，其余图像无效。

我使用了 jquery 插件。它不工作。下面的代码。

需要做哪些更改，让我知道。提前致谢

(function($) {
  $.fn.hoverGrid = function(options) {
    var settings = $.extend({
      'itemClass': '.item'
    }, options);

    return this.each(function() {
      var hoverGrid = $(this);
      hoverGrid.addClass('hover-grid');
      hoverGrid.find(settings.itemClass).addClass('hover-grid-item');

      $(hoverGrid).find(settings.itemClass).hover(function() {
          $(this).find('div.caption').stop(false, true).fadeIn(200);
        },
        function() {
          $(this).find('div.caption').stop(false, true).fadeOut(200);
        });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('#whatever').hoverGrid();
});

/*!
     * jQuery Cookiebar Plugin CSS
     * https://github.com/carlwoodhouse/jquery.cookieBar
     *
     * Copyright 2012, Mark Searle, Carl Woodhouse.
     */

.hover-grid .hover-grid-item {
  width: 181px;
  height: 181px;
  margin: 0 18px 18px 0;
  float: left;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  overflow: hidden;
  position: relative;
  cursor: default;
}

.hover-grid img {
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  border: 0;
  position: absolute;
  margin: 0;
  padding: 0;
}

.hover-grid-item .caption {
  background-color: #222;
  width: 145px;
  height: 145px;
  padding: 18px;
  position: absolute;
  left: 0;
  color: #fff;
  display: none;
  line-height: 1.1;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
}

.hover-grid-item .caption p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

ID 在 html 页面中必须是唯一的。您可以将 id=whatever 更改为 class=whatever 然后使用 $(".whatever") 应用到所有。

更新的片段:

(function($) {
  $.fn.hoverGrid = function(options) {
    var settings = $.extend({
      'itemClass': '.item'
    }, options);

    return this.each(function() {
      var hoverGrid = $(this);
      hoverGrid.addClass('hover-grid');
      hoverGrid.find(settings.itemClass).addClass('hover-grid-item');

      $(hoverGrid).find(settings.itemClass).hover(function() {
          $(this).find('div.caption').stop(false, true).fadeIn(200);
        },
        function() {
          $(this).find('div.caption').stop(false, true).fadeOut(200);
        });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('.whatever').hoverGrid();
});

/*!
     * jQuery Cookiebar Plugin CSS
     * https://github.com/carlwoodhouse/jquery.cookieBar
     *
     * Copyright 2012, Mark Searle, Carl Woodhouse.
     */

.hover-grid .hover-grid-item {
  width: 181px;
  height: 181px;
  margin: 0 18px 18px 0;
  float: left;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  overflow: hidden;
  position: relative;
  cursor: default;
}

.hover-grid img {
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  border: 0;
  position: absolute;
  margin: 0;
  padding: 0;
}

.hover-grid-item .caption {
  background-color: #222;
  width: 145px;
  height: 145px;
  padding: 18px;
  position: absolute;
  left: 0;
  color: #fff;
  display: none;
  line-height: 1.1;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
}

.hover-grid-item .caption p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>