我想悬停（显示和隐藏）多个ID超过点不同的文本

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