0

Какой правильный синтаксисом псевдо-функции :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

1
  • 1
    На чистом css невозможно обратиться к родителю или предыдущему элементу. Здесь нужен js 9 сен 2018 в 11:07

2 ответа 2

2

Можно вызвать элемент по соседнему селектору но обязательно иметь общего родителя ....либо применить js - я показал оба варианта...

Примерно так:

$(".a1").on("mousemove", function(){
  $(".a6").toggleClass("sure");
});
table{
  width:100vw;
  height:50vh;
}
td{
  font-variant:small-caps;
  text-transform:uppercase;
  font-weight:900;
}

.a1,.a7,.a10{
  position: relative;
}
.a1:after,.a7:after,.a10:after{
  content:"";
  position: absolute;
  right:5px;
  top:5px;
  width:30px;
  height:30px;
  background:url(https://3.bp.blogspot.com/-4S7UHac3UuE/VGntfaCzLvI/AAAAAAAACqA/ILCnQhhOqIk/s400/auto%2Bclick%2Bdengan%2Bjavascript.png);
  background-size:cover;
}

.a6,.a8,.a11{
  visibility:hidden;
  transition:.5s;
}
.sure,
.a7:hover~.a8,
.a10:hover~.a11{
  visibility:visible;
  animation:color .4s linear;
}

@keyframes color{
  100%{
    background:yellow;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border>
  <tr>
    <td class="a1" title="Событие произойдёт при ДВИЖЕНИИ мышки в первом TD">a1</td>
    <td class="a2">a2</td>
  </tr>
  <tr>
    <td class="a3">a3</td>
    <td class="a4">a4</td>
  </tr>
  <tr>
    <td class="a5">a5</td>
    <td class="a6">a6</td>
    <td class="a7" title="РЯДОМ СТОЯЩИЙ td ПОВИТСЯ ПРИ HOVER">a7</td>
    <td class="a8">a8</td>
    <td class="a9">a9</td>
    <td class="a10" title="Событие произойдёт при ДВИЖЕНИИ мышки в первом TD">a10</td>
    <td class="a11">a11</td>
    <td class="a12">a12</td>
  </tr>
</table>

0
    tr td .y1:hover, tr td .mny:hover{
...
}
4
  • попробовал - не сработало. если записываю два "ховера", то объект сразу появляется и отображается всегда, а если записываю без второго "ховера", то банально ничего не работает вообще 9 сен 2018 в 11:22
  • То есть вам не нужен hover для 2 td?? если так, то тогда это совсем другая история 9 сен 2018 в 11:31
  • мне нужно чтоб просто при наведении на один тд - происходило взаимодействие с другим тд (в моем случае "visibility: visible;" нужно чтоб просто второй тд появлялся) 9 сен 2018 в 11:33
  • Тогда вам нужно, как сказал автор комментария выше - уже писать JavaScript 9 сен 2018 в 11:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.