Question

我的页面上有几个元素，结构如下：

<div class="selector-wrapper">
  <div class="selector"></div>
</div>

当用户将父元素悬停时，我现在希望.selector元素更改为悬停状态。

我发现了这段代码（我刚刚添加了$(this)），但它给了我一个错误：

[错误] RangeError：超出最大调用堆栈大小。

$('.selector-wrapper').on('mouseenter mouseleave', function(e) {
    $(this).find('.selector').trigger(e.type);
})

这段代码有什么问题？

Answer 1

问题是因为你在子元素上触发的事件然后将DOM冒泡回到.selector-wrapper，然后再次触发孩子，依此类推。

相反，不要在子元素上触发事件，而是在事件处理程序中执行您需要的任何逻辑，例如添加类以更改样式。试试这个：

＆＃13;

$('.selector-wrapper').on('mouseenter mouseleave', function(e) {
  $(this).find('.selector').toggleClass('foo');
  // whatever logic you require here...
});

＆＃13;

.selector-wrapper {
  width: 100%;
  height: 100px;
  background-color: #C00;
}
.selector {
  width: 50px;
  height: 50px;
  background-color: #0C0;
}
.foo {
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector-wrapper">
  <div class="selector"></div>
</div>

＆＃13;

Answer 2

使用CSS：

.selector-wrapper:hover .selector{
    /* Css code goes here..*/
}

Answer 3

使用css也很容易：

.selector-wrapper:hover .selector {
    /* Your code*/
}

如果使用jQuery，则可以轻松使用此功能：

$('.selector-wrapper').hover(function() {
    // Your code
}

示例：

$(document).ready(function() {
  $('.selector-wrapper').hover(function() {
    $('.selector').toggleClass('show');
  });
});

.selector-wrapper {
  height: 100px;
  width: 100px;
  background-color: grey;
}
.selector {
  color: white;
  text-shadow: 5px white;
  display: none;
  z-index: 2;
  font-size: 14px;
  text-align: center;
}
.show {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="selector-wrapper">
  <div class="selector">JQuery</div>
</div>

使悬停影响子元素

3 个答案: