JQuery проблема с изменением границы при наведении и отпусканием мыши

Question

Пример: https://codepen.io/ricardo-sud/pen/gOPMBRN

    $("*").hover(
      function () {
      
        $(this).addClass("result_hover");
      },
      function () {
        $(this).removeClass("result_hover");
      }
    );

     .result {
        height: 72px;
        width: 100%;
        border: 1px solid #000;
      }
      .result_hover {
        border: 5px solid red;
      }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="result">
      <div class="item">
        <div id="item1">
          <i class="icon"></i>&nbsp;##
        </div>
      </div>
    </div>
    <br><br>
    <p>
    Testing
    </p>
    <p>
    Testing 1
    </p>

Я пытаюсь добавить границу (я предпочитаю делать это встроенным, если возможно) к любому элементу, на который наведен указатель мыши (не к родителям ), но это распространяется, и красная граница не только над одним элементом, но и над родителями или другими элементами. Перейдите по ссылке и посмотрите на проблему.

Любая помощь приветствуется

С уважением

Answer 1

Пожалуйста, проверьте следующий код.

Это то, что вам нужно?

$(".result").hover(
      function () {
      
        $(this).addClass("result_hover");
      },
      function () {
        $(this).removeClass("result_hover");
      }
    );

.result {
        height: 72px;
        width: 100%;
        border: 1px solid #000;
      }
      .result_hover {
        border: 5px solid red;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="result">
      <div class="item">
        <div id="item1">
          <i class="icon"></i>&nbsp;##
        </div>
      </div>
    </div>
    <br><br>
    <p>
    Testing
    </p>
    <p>
    Testing 1
    </p>

Answer 2

Вам нужны другие триггеры и e.stopPropagation():

$("*").mouseover(function(e) {
  $(this).addClass("result_hover")
  e.stopPropagation()
})

$("*").mouseout(function(e) {
  $(this).removeClass("result_hover")
  e.stopPropagation()
})

.result {
  height: 72px;
  width: 100%;
  border: 1px solid #000;
}

.result_hover {
  border: 5px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>&nbsp;##
    </div>
  </div>
</div>
<br><br>
<p>
  Testing
</p>
<p>
  Testing 1
</p>

EDIT

Я бы также не использовал border, потому что содержимое просто перескакивает. Используйте вместо него outline:

$("*").mouseover(function(e) {
  $(this).addClass("result_hover")
  e.stopPropagation()
})

$("*").mouseout(function(e) {
  $(this).removeClass("result_hover")
  e.stopPropagation()
})

.result {
  height: 72px;
  width: 100%;
  border: 1px solid #000;
}

.result_hover {
  outline: 5px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>&nbsp;##
    </div>
  </div>
</div>
<br><br>
<p>
  Testing
</p>
<p>
  Testing 1
</p>