Question

功能需要解决 - 我们需要获得＆＃34;内容的高度＆＃34;类容器。将鼠标移到图像容器父级＆＃34; a＆＃34;标签。悬浮效果从底部开始：0到孩子的高度＆＃34; a＆＃34; ＆＃34;内容＆＃34;类。

但是，现在的行为 - 它一直持续到同位素网格的结束＆＃34;高度。它从底部开始：0到顶部：0。

HTML：

<div class="isotope-grid" data-isotope-tile="{modifier:'large', order:{mobile:1, desktop:1}}">
  <a href="javascript:;">
    <div class="image">
      <picture>
        <img srcset="images/goodcare.png" alt="Reccommended">
      </picture>
      <img class="icon" src="images/icons/badge.png" alt=""/>
    </div>
    <a href="regional.html" class="content toggleLink" target="_top">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Mauris vitae ipsum sit amet mauris sagittis tincidunt id id enim. Aliquam erat volutpat. Nulla facilisi. Donec imperdiet suscipit accumsan.</p>
    </a>
  </a>
</div>
<div class="isotope-grid" data-isotope-tile="{modifier:'large', order:{mobile:1, desktop:1}}">
  <a href="javascript:;">
    <div class="image">
      <picture>
        <img srcset="images/goodcare.png" alt="Reccommended">
      </picture>
      <img class="icon" src="images/icons/badge.png" alt=""/>
    </div>
    <a href="regional.html" class="content toggleLink" target="_top">
      <h3>Lorem ipsum dolor sit amet2</h3>
      <p>Mauris vitae ipsum sit amet mauris sagittis tincidunt id id enim. Aliquam erat volutpat. Nulla facilisi. Donec imperdiet suscipit accumsan2.</p>
    </a>
  </a>
</div>

JQUERY：

// on mouseenter large tiles
$(document).on('mouseenter', '.isotope-grid--large', function(e) {
    var jTarget = $(this).find('.content');
    var height = $(e.currentTarget).css("height");
    jTarget.stop().animate({
        height: height
    });
});

// on mouseleave large tiles
$(document).on('mouseleave', '.isotope-grid--large', function(e) {
    var jTarget = $(this).find('.content');
    var height = 110;
    if (!bMediumScreen) {
        height = $(e.currentTarget).height() - $($(e.currentTarget).find("img")[0]).height();
    }
    jTarget.stop().animate({
        height: height,
        bottom: "0"
    });
});

Answer 1

您需要将孩子'h3'的高度添加到孩子'p'的高度，然后您将获得'.content'的高度：

var jTarget = $(this).find('.content');
var height = jTarget.children('h3').height() + jTarget.children('p').height();

根据检测到的高度获取载荷高度和悬停效果

1 个答案: