我想用不同的文本悬停(显示和隐藏)多个ids

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>

​

当我将鼠标悬停在single Dot上时，它会在点上显示所有文本(伊斯兰堡、德里、阿富汗)。我想在特定的点上显示每个文本。

Output Image

Answer 1

代码

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

当你悬停'.text‘div时，显示所有的'.box’div。你必须像这样区分

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