Необходимо сделать так, чтобы при наведении на любой из элементов с классом row-1
менялся фон одновременно у всех элементов с классом row-1
.
Это маленькая табличка из div-ов
.
Задача: при наведении на столбец любую ячейку столбца
должен загораться весь столбец.
Возможно ли это?
Подскажите как?
.table-stu {
display: flex;
flex-direction: column;
border: 1px solid black;
border-radius: 10px;
max-width: 700px;
}
.row-table-stu {
display: flex;
}
.row-table-stu div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
width: 100px;
height: 46px;
text-align: center;
}
.row-table-stu div:first-child {
min-width: 100px;
font-weight: bold;
}
.row-table-stu div:last-child {
font-weight: bold;
}
.table-stu .row-table-stu:first-child {
font-weight: bold;
}
.table-stu-price-descr {
font-size: 12px;
max-width: 700px;
}
.row-table-stu:first-child div:first-child {
border-radius: 8px 0 0 0;
}
.row-table-stu:first-child div:last-child {
border-radius: 0 8px 0 0;
}
.row-table-stu:last-child div:first-child {
border-radius: 0 0 0 8px;
}
.row-table-stu:last-child div:last-child {
border-radius: 0 0 8px 0;
}
<div class="table-stu">
<div class="row-table-stu">
<div class="row-1">Lorem1</div>
<div class="row-2">Lorem2</div>
<div class="row-3">Lorem3</div>
</div>
<div class="row-table-stu">
<div class="row-1">Lorem1</div>
<div class="row-2">Lorem2</div>
<div class="row-3">Lorem3</div>
</div>
<div class="row-table-stu">
<div class="row-1">Lorem1</div>
<div class="row-2">Lorem2</div>
<div class="row-3">Lorem3</div>
</div>
</div>
row-*
классы, наcol-*
, потому что сбивает с толку.