0
私は4つのdivに同じクラスがあり、それらは複数の他のdivのグリッドで隣り合っていますが、divにはホバーの影響を追加したいまた変化する可能性がありますが、現在は4ですが、異なる地域では6またはそれ以下になることがあります。複数のDivを同時に1つのdivに表示
基本的に同じクラスのdivにカーソルを合わせ、1つの大きなdivのように見せたいと思います。
.divTable{
\t display: table;
\t width: 100%;
}
.divTableRow {
\t display: table-row;
}
.divTableHeading {
\t background-color: #EEE;
\t display: table-header-group;
}
.divTableCell, .divTableHead {
\t border: 1px solid #999999;
\t display: table-cell;
\t padding: 3px 10px;
width:40px;
height:30px;
}
.divTableCellActive{
background-color: red;
border: 1px solid red;
}
.divTableCell:hover{
background-color:green;
}
.divTableHeading {
\t background-color: #EEE;
\t display: table-header-group;
\t font-weight: bold;
}
.divTableFoot {
\t background-color: #EEE;
\t display: table-footer-group;
\t font-weight: bold;
}
.divTableBody {
\t display: table-row-group;
}
.box {
/*position: relative;*/
/*display: inline-block;*/
display: table-cell;
\t 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;
}<div class="divTable">
<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>
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></div>
<div class="divTableCell divTableCellActive"></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>
<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>
</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>
作品...おかげ。 – Cyber