同时将鼠标悬停在多个Div上，使其看起来像1 div

Question

我有4个div，每个都有相同的类，并且它们在多个其他div的网格中彼此相邻，但是我想添加悬停效果的div也可以变化，现在它是4但是在不同的区域上它可以是6或更多。

基本上我想将鼠标悬停在同一个类的div上，让它们看起来像一个大的div。

＆＃13;

＆＃13;

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
  width:40px;
  height:30px;
}
.divTableCellActive{
  background-color: red;
  border: 1px solid red;
}

.divTableCell:hover{
background-color:green;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.box {
  /*position: relative;*/
  /*display: inline-block;*/
  display: table-cell;
	padding: 3px 10px;
  width: 40px;
  height: 30px;
  background-color: #fff;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
  content: "";
  border-radius: 1px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.box:hover::after {
    opacity: 1;
}

＆＃13;

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

<div class="divTable" style="margin-top:2em;">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用jQuery toggleClass函数添加效果类，然后根据自己的需要进行自定义。

＆＃13;

＆＃13;

$(".divTableCellActive").hover(function(){
    $(".divTableCellActive").toggleClass("effect");
});

＆＃13;

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
  width:40px;
  height:30px;
}
.divTableCellActive{
  background-color: red;
  border: 1px solid red;
}

.divTableCellActive.effect{
  background-color: green;
}

.divTableCell:hover{
background-color:green;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.box {
  /*position: relative;*/
  /*display: inline-block;*/
  display: table-cell;
	padding: 3px 10px;
  width: 40px;
  height: 30px;
  background-color: #fff;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box::after {
  content: "";
  border-radius: 1px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.box:hover {
  -webkit-transform: scale(1.25, 1.25);
  transform: scale(1.25, 1.25);
}

.box:hover::after {
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

<div class="divTable" style="margin-top:2em;">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="box divTableCellActive"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;