Question

我试图设置一些东西，当你将鼠标悬停在一个元素上时，另一个元素就好像它也一直悬停在上面。

我设法让它在第一次使用时工作，但它似乎在之后打破它。

我的代码：

＆＃13;

$(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');
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你有2个错误：

1.你写了一个＆＃39;而不是＆＃39;＃one＆＃39;

2.鼠标输出功能只能让另一个停止徘徊。（抱歉英语不好）

这是固定（工作）代码

＆＃13;

$(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');
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我会做一些事情：

使用类而不是ID
将您的悬停事件绑定到一个类并使用数据属性，这样您就不会重复代码
添加和删除类而不是实际样式

$('.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>

Answer 3

由于您使用的是.css()功能，因此您必须在!important某些属性中使用css，如下所示：

  $(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

但建议切换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

请勿忘记将之前的(one)更改为(#"one") ，而不是之前推荐的其他人！

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 {}定位，也可以在页面上有更多div时为它们提供相同的类。

一般情况下，我不会在CSS中使用标识符作为单个元素的标识符，而类可以分配给多个元素。此外，程序员经常使用/删除或更改标识符，特别是如果HTML是通过动态过程呈现的。虽然CSS类应该更可靠，因为编码器不应该触及它们，因为它们不是功能而是触摸它们。

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

4 个答案: