Question

我想将文本（鼠标悬停和鼠标悬停）悬停在点上。每个点都有不同的文字。

我已经通过硬编码完成了这项任务。但是我想使其准确而简短。我想通过唯一的ID和相同的类来完成这项工作。

$(document).ready(function() {
  $('.colors').hide();
  $(function() {
    $('#mapselector').change(function() {
      $('.colors').hide();
      $('.text').hide();
      $('#' + $(this).val()).show();
      $('.box').mouseover(function() {
        $('.text').show();
      });
      $('.box').mouseout(function() {
        $('.text').hide();
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <Select id="mapselector" class="custom-select bg-warning">
    <option>Select Options</option>
    <option value="asia">Asia</option>
  </Select>
</div>
<div id="asia" class="colors" style="display:none">
  <div id="pin-1" class="box">
    <div id="pin-text1" class="text" value="Islam">
      <p class="h6 pt-3 pr-5">Islamabad</p>
    </div>
  </div>
  <div id="pin-2" class="box">
    <div id="pin-text2" class="text">
      <p class="h6  pt-3 pr-5">Afghan</p>
    </div>
  </div>
  <div id="pin-3" class="box">
    <div id="pin-text3" class="text">
      <p class="h6 pt-3 pr-5 ">Delhi</p>
    </div>
  </div>
</div>

当我将鼠标悬停在单个点上时，它会在点（伊斯兰堡，德里，阿富汗）上显示所有文本。我想在特定点上显示每个文本。

Output Image

Answer 1

代码

      $('.box').mouseover(function() {
        $('.text').show();
      });
      $('.box').mouseout(function() {
        $('.text').hide();
      });

当您将鼠标悬停在“ .box” div上时，

显示所有“ .text” div。你必须这样区分

  $('.box').mouseover(function() {
    $(this).find('.text').show();
  });
  $('.box').mouseout(function() {
    $(this).find('.text').hide();
  });

我想将具有不同文本的多个ID悬停（显示和隐藏）在点上

1 个答案: