使用jQuery激活多个元素的悬停状态

Question

我正在尝试设置这样一个功能：当你悬停在一个元素上时，另一个元素会表现得好像它也被悬停了。

我已经成功地在第一次使用时让它工作了，但之后似乎就失效了。

我的代码：

$(function() {
  $('#one').hover(function() {
    $('#three').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('#three').css('box-shadow', 'none');
  });
});

$(function() {
  $('#three').hover(function() {
    $('#one').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('one').css('box-shadow', 'none');
  });
});

#one, #two, #three {
  position: absolute;
  height: 100px;
  width: 100px;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
  margin-left: 100px;
}
#three {
  background-color: blue;
  margin-left: 200px;
}
#one:hover, #two:hover, #three:hover {
  box-shadow: 0 0 5px 2px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

- bruthanimrod

---

我建议在多个子元素上进行更改时使用类。这样所有的CSS都在CSS文件中，代码也能够清晰地工作。 - Eduard Void

为什么不设置一个类并添加和删除它 - 这样会更容易维护。 - Pete

只有当你悬停在蓝色正方形上时才会出现问题。不要使用标识符。通过给它们一个共同的属性来分组元素，例如 data-group="x"，并将其用作选择器。这样，您就不必担心哪个标识符也是该组的一部分，并使用CSS类，不要嵌入这样的样式，这样更难以维护和编辑。 - Nope

Answer 1

您有两个错误：

1.您写成了'one'而不是'#one'

2.mouse out函数只会使另一个停止悬停。(对不起，我的英语很烂)

这是修复(可用)的代码

$(function() {
  $('#one').hover(function() {
    $('#three').css('box-shadow', '0 0 5px 2px black');
    $('#one').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('#three').css('box-shadow', 'none');
    $('#one').css('box-shadow', 'none');
  });
});

$(function() {
  $('#three').hover(function() {
    $('#one').css('box-shadow', '0 0 5px 2px black');
    $('#three').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('#one').css('box-shadow', 'none');
    $('#three').css('box-shadow', 'none');
  });
});

#one, #two, #three {
  position: absolute;
  height: 100px;
  width: 100px;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
  margin-left: 100px;
}
#three {
  background-color: blue;
  margin-left: 200px;
}
#one:hover, #two:hover, #three:hover {
  box-shadow: 0 0 5px 2px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

- Tᴏᴍᴇʀ Wᴏʟʙᴇʀɢ

Answer 2

因为您正在使用 .css() 函数，所以您必须在某些 css 属性中使用 !important，如下所示:

  $(function() {
  $('#one').hover(function() {
    $('#three').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('#three').css('box-shadow', 'none');
  });
});

$(function() {
  $('#three').hover(function() {
    $('#one').css('box-shadow', '0 0 5px 2px black');
  }, function() {
    $('#one').css('box-shadow', 'none');
  });
});

#one, #two, #three {
  position: absolute;
  height: 100px;
  width: 100px;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
  margin-left: 100px;
}
#three {
  background-color: blue;
  margin-left: 200px;
}
#one:hover, #two:hover, #three:hover {
  box-shadow: 0 0 5px 2px black !important; /* here we use important*/
}

jsfiddle

请将此代码放入JSFiddle平台进行测试。

---

但是建议使用类似以下方式来切换class：

$(function() {
  $('#one').hover(function() {
    $('#three').addClass("act");
  }, function() {
    $('#three').removeClass("act");
  });

  $('#three').hover(function() {
    $('#one').addClass("act")
  }, function() {
    $('#one').removeClass("act");
  });
});

#one, #two, #three {
  position: absolute;
  height: 100px;
  width: 100px;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
  margin-left: 100px;
}
#three {
  background-color: blue;
  margin-left: 200px;
}
#one:hover, #two:hover, #three:hover {
  box-shadow: 0 0 5px 2px black;
}

.act
{
box-shadow: 0 0 5px 2px black;
}

jsfiddle

{{链接1：jsfiddle}}

---

不要忘记像其他人建议的那样将您的最后一个 (one) 更改为 (#"one")！

- pouyan

Answer 3

我会做以下几件事情：

1. 使用类而不是 id
2. 将悬停事件绑定到一个类，并利用数据属性，这样您就不需要重复代码
3. 添加和删除类而不是实际的样式

$('.box').hover(function() {
  var $this = $(this);
  if ($this.attr('data-target')) { /* check if attr exists */
    $(`#${$this.data('target')}`).addClass('hover');
  }
},
function() {
  var $this = $(this);
  if ($this.attr('data-target')) { /* check if attr exists */
    $(`#${$this.data('target')}`).removeClass('hover');
  }
});

.box {
  height: 100px;
  width: 100px;
  float:left;
}
#one {
  background-color: orange;
}
#two {
  background-color: black;
}
#three {
  background-color: blue;
}
.box:hover,
.hover {
  box-shadow: 0 0 5px 2px black; /* use a class that is the same as the actual hover, then you only need to edit in one place if you change it */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="one" data-target="three"></div>
<div class="box" id="two"></div>
<div class="box" id="three" data-target="one"></div>

- Pete

Answer 4

你可以使用类并在悬停时添加/删除类。你还可以使用组来识别你希望使用数据属性“组合”的元素。

var $targets = $('[data-group=group1]');

$(function() {
  $targets.hover(function() {
    $targets.addClass('active');
  }, function() {
    $targets.removeClass('active');
  });
});

div {
  position: absolute;
  height: 100px;
  width: 100px;
}

.first {
  background-color: orange;
}

.second {
  background-color: black;
  margin-left: 100px;
}

.last {
  background-color: blue;
  margin-left: 200px;
}

div:hover {
  box-shadow: 0 0 5px 2px black;
}

.active {
  box-shadow: 0 0 5px 2px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-group="group1" class="first"></div>
<div class="second"></div>
<div data-group="group1" class="last"></div>

您的CSS不需要单独针对所有标识符进行定位。只需一次性定位它们，直接通过其元素div:hover或div {}，或者如果页面上有更多的

，则将它们全部赋予相同的类。

一般情况下，我不会在CSS中使用标识符，因为它们只能针对单个元素进行定位，而类可以分配给多个元素。此外，标识符通常由程序员使用/删除或更改，特别是如果HTML是通过动态过程呈现的。尽管CSS类应该更可靠，因为编码人员不应该触及它们，因为它们是用于样式而不是功能。

- Nope