Question

我对javascript非常陌生，希望能获得帮助。

我要实现的目标

我有一个由3列组成的div；

第1列包含4张图片
第2列包含一个空的p标签
第3列还包含另外4张图像。

目标是每当我将鼠标悬停在任何图像上时，悬停的图像的替代文本都将显示在第2列的<p>标签中。

问题

<p>标记中会显示不同大小的文本，有时文本会溢出元素的边界。为了尝试修复它，我试图使用if语句覆盖css以减小文本大小。问题是一旦我再次将鼠标悬停在上面。下面是我的代码：

$(document).ready(function() {
  var sectionHeight = $('.section-content').height();
  var sectionWidth = $('.service-content-container').width();
  console.log("Height of center sections originally was " + sectionHeight);
  console.log("Width of center sections originally was " + sectionWidth);
  $('.img-thumbnail').mouseover(function() {
    //var serviceWidth = $('.service-content-container').width();
    var imgAlt = this.alt;
    var serviceDescription = $('.service-description');
    serviceDescription.text(imgAlt);
    console.log("service description height = " + serviceDescription.height() + " and width = " + serviceDescription.width());
    if (serviceDescription.height() > sectionHeight || serviceDescription.width() > sectionWidth) {
      $('#service-description').css('font-size', '30px');
    } else if (serviceDescription.height() < sectionHeight && serviceDescription.width() < sectionWidth) {
      $('#service-description').css('font-size', '80px');
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row w-100 section">
  <div class="w-100 section-heading-container align-text py-5">
    <h1 class="display-1 text-center">Section</h1>
  </div>
  <div class="row section-content">
    <div class="content-right col-xl-5 float-right">
      <div class="row">
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img1.png" alt="img1">
        </div>
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img2.jpg" alt="img2">
        </div>
        <div class="col-xl-4 float-right">
          <img class="img-thumbnail" src="img/thumbnails/img3.png" alt="img3">
        </div>
      </div>
      <div class="row">
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img4.png" alt="img4">
        </div>
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img5.png" alt="img5">
        </div>
        <div class="col-xl-4 float-right">
          <img class="img-thumbnail" src="img/thumbnails/img6.png" alt="img6">
        </div>
      </div>
    </div>
    <div class="service-content-container content-center my-auto col-xl-2">
      <p id="service-description" class="service-description text-center">Defaulttext</p>
    </div>
    <div class="content-left col-xl-5 float-left">
      <div class="row">
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img7.png" alt="img7">
        </div>
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img8.png" alt="img8">
        </div>
        <div class="col-xl-4 float-right">
          <img class="img-thumbnail" src="img/thumbnails/img9.png" alt="img9">
        </div>
      </div>
      <div class="row">
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img10.png" alt="img10">
        </div>
        <div class="col-xl-4 float-left">
          <img class="img-thumbnail" src="img/thumbnails/img11.png" alt="img11">
        </div>
        <div class="col-xl-4 float-right">
          <img class="img-thumbnail" src="img/thumbnails/img12.png" alt="img12">
        </div>
      </div>
    </div>
  </div>
</div>

javascript-公共div中的动态文本大小

0 个答案: