Какой правильный синтаксисом псевдо-функции :hover через обращение одного блока к другому, которые находятся не в одном месте?
Вот мой код (выдержка из таблицы). Здесь заданы несколько ячеек.
Мне нужно чтоб при наведении курсора на ячейку таблицы (в данном случае класса "y1") появлялся блок из другой ячейки этой же таблицы "mny".
Ниже запись самого ховера (которая вероятнее всего неправильная [ну раз она не работает]).
Пролистав 5 электронных учебников и посмотрев 3 видео-ролика на ютубе я всё равно не нашел решение своей проблемы. Единственное важное что видел на одном из сайтов, так это то, что нужно прописывать родительские элементы если объекты не находятся в одном месте. Но как именно это делать (по каким правилам здесь синтаксис) я так и не нашел. Нужно сделать на чистом HTML+CSS (если это вообще возможно) Так же прилаживаю полный HTML и CSS код
/* в сниппете оно не нужно (CbIPoK2513)
table{
position: absolute;
top: 150px;
left: 500px;
/* border: 2px solid #7FC7FF; */
}*/
td {
border: none;
}
.yach {
height: 50px;
width: 50px;
background-color: #7FC7FF;
}
.plx {
position: relative;
/* top: 411px;
left: 525px; */
}
.ply {
position: relative;
/* top: 185px;
left: 751px; */
}
.pl {
height: 50px;
width: 50px;
color: white;
font-size: 24px;
font-weight: bold;
text-decoration: none;
background-color: orange;
}
.txt {
position: relative;
top: 13.5px;
text-align: center;
height: 50px;
width: 50px;
margin: 0px;
}
.pl:hover {
cursor: pointer;
opacity: 0.5;
transition: 1s;
}
.mn {
position: relative;
/* top: 185px;
left: 525px; */
height: 50px;
width: 50px;
color: white;
font-size: 24px;
font-weight: bold;
text-decoration: none;
background-color: #8B0000;
visibility: hidden;
}
/* .mnx{
position:absolute;
top: 126px;
left: 525px;
} */
/* .mny{
position:absolute;
top: 185px;
left: 465px;
display: none;
} */
.mn:hover {
cursor: pointer;
opacity: 0.5;
transition: 1s;
}
.x1:hover+.mnx {
visibility: visible;
}
.x2:hover+.mnx {
visibility: visible;
}
.x3:hover+.mnx {
visibility: visible;
}
.x4:hover+.mnx {
visibility: visible;
}
.y1:hover+.mny {
visibility: visible;
cursor: pointer;
}
.y2:hover+.mny {
visibility: visible;
}
.y3:hover+.mny {
visibility: visible;
}
.y4:hover+.mny {
visibility: visible;
}
<table>
<tbody>
<tr>
<td></td>
<td colspan="4">
<div class="mn mnx">
<p class="txt">-</p>
</div>
</td>
</tr>
<tr>
<td rowspan="4" valign="top">
<div class="mn mny">
<p class="txt">-</p>
</div>
</td>
<td class="yach x1 y1"></td>
<td class="yach x1 y2"></td>
<td class="yach x1 y3"></td>
<td class="yach x1 y4"></td>
<td rowspan="4" valign="top">
<div class="pl plx">
<p class="txt">+</p>
</div>
</td>
</tr>
<tr>
<td class="yach x2 y1"></td>
<td class="yach x2 y2"></td>
<td class="yach x2 y3"></td>
<td class="yach x2 y4"></td>
</tr>
<tr>
<td class="yach x3 y1"></td>
<td class="yach x3 y2"></td>
<td class="yach x3 y3"></td>
<td class="yach x3 y4"></td>
</tr>
<tr>
<td class="yach x4 y1"></td>
<td class="yach x4 y2"></td>
<td class="yach x4 y3"></td>
<td class="yach x4 y4"></td>
</tr>
<tr>
<td></td>
<td colspan="4">
<div class="pl ply">
<p class="txt">+</p>
</div>
</td>
</tr>
</tbody>
</table>
И так же на всякий случай прилаживаю пример обычного :hover'а двух блоков из-за которого я и хочу сделать полную CSS-анимацию без использования JS