关于hever deligation的jquery：让元素盘旋

Question

所以我创建了一个jquery插件，它有一个屏幕，用户将鼠标悬停在页面上的元素上以选择它们。当用户将鼠标悬停在元素上时，我希望在该元素周围出现2px边框。所以我研究了事件和委托，发现如果我使用委托，我可以为整个页面提供两个事件处理程序（mouseenter，mouseleave），而不是每个元素有两个事件处理程序。所以我尝试了这一点，发现它有效，但是当我徘徊时，元素和它的父母都有边界。我认为这是由于委托和事实，我有容器与事件类在彼此之内。所以我想知道我如何只针对子元素，所以我可以应用边框并从中检索信息。这是我的代码：

Jvavascript函数，Css和Html：

function overlay(bool){
  if(bool === "on"){
    $('body').addClass(settings.overlayClass);
    console.log("before on");
    $('body').on('mouseenter','.stripe',function(e) {
      // e.preventDefault();
      // var currentElement = $('.stripe').index(this);
      // var element = $('.stripe:nth-of-type('+currentElement+')');
      // console.log(currentElement + ' ' + element);
      $(this).addClass("overlay-hover");
      e.stopPropagation();
    }).on('mouseleave','.stripe,.slot',function(e) {
      e.preventDefault();
      $(this).removeClass("overlay-hover");
    });
  }else {
    var element = $('.stripe:nth-of-type('+currentElement+')');
    $('body').removeClass(settings.overlayClass);
    element.off("hover.overlay");
  }
}

.overlay-hover{	
	border:2px solid #2980B9;	
}

<div class="container group">
    <header class="sidebar slot"><strong>Sidebar (1 of 1:3 at 1)</strong>
      <div class="stripe group main-logo"><strong>Main Logo (Ratio 1:1)</strong>
        <div class="slot"><strong>Slot (1 of 1:4 at 2)</strong></div>
      </div>
      <div class="stripe group main-nav"><strong>Main Nav (Ratio 1:1)</strong>
        <div class="slot"><strong>Slot (1 of 1:4 at 2)</strong></div>
      </div>
      <div class="stripe group created-by"><strong>Created By Ratio 1:1</strong>
        <div class="slot"><strong>Slot (1 of 1:4 at 2)</strong></div>
      </div>
    </header>
    <div class="body"><strong>Body (1 of 1:3 at 1)</strong>
      <main class="main stripe group"><strong>Main (Ratio 1:1)</strong>
        <section class="intro stripe group"><strong>Intro (Ratio 1:1)</strong>
          <div class="slot"><strong>Slot (1 of 1 at 1)</strong></div>
        </section>
        <section class="slider stripe group"><strong>Slider (Ratio 1:1)</strong>
          <div class="slot"><strong>Slot (1 of 1 at 1)</strong></div>
        </section>
        <section class="main-content stripe group"><strong>Main Content (Ratio 1:1)</strong>
          <aside class="slot"><strong>Slot (1 of 1 at 1)</strong></aside>
          <article class="slot"><strong>Slot (1 of 1 at 1)</strong></article>
        </section>
      </main>
      <footer class="footer group"><strong>Footer Ratio 4:1</strong>
        <section class="fixed-footer stripe">
          <div class="contact-info slot"><strong>Contact Info (1 of 4:1 at 1)</strong></div>
          <div class="location-info slot"><strong>Location Info (1 of 4:1 at 2)</strong></div>
          <div class="newsletter slot"><strong>Newsletter (1 of 4:1 at 2)</strong></div>
        </section>
      </footer>
    </div>
    <aside class="slBT-tab-class dark slBT-opened" id="slBT-tab">
      <div class="relative">
        <section id="slBT-tab-button-section"><a href="" id="slBT-tab-button">Report a bug<i class="icon-comment"></i></a></section>
        <section id="slBT-tab-body-section">
          <form class="group">
            <div class="select">
              <lebel id="">Bug Severity:</lebel>
              <select>
                <option selected="selected" value="high">Site Breaking(high)</option>
                <option value="medium">Minor Bug(med)</option>
                <option value="mercedes">Small Annoyance(low)</option>
              </select>
            </div>
            <div class="textarea group">
              <lebel id="">Bug Description:</lebel>
              <textarea></textarea>
            </div>
            <div class="submit">
              <button type="submit">Submit</button>
            </div>
          </form>
        </section>
      </div>
    </aside>
  </div>