HTML / CSS: запускать действия между ячейками?

Question

Мне нужна таблица, которая выглядит примерно так:

  __________________________________________
 |__________|__________|____________________|
 |    1     |    4     |     ___________    |
 |__________|__________|    |           |   |
 |    2     |    5     |    |  default  |   |
 |__________|__________|    |  picture  |   |
 |    3     |    6     |    |___________|   |
 |__________|__________|____________________|

И для каждого из чисел (ячеек таблицы) я хочу, чтобы эффект наведения был чем-то другим. Например:

  __________________________________________
 |__________|__________|____________________|
 |  **1**   |    4     |     ___________    |
 |__________|__________|    |           |   |
 |    2     |    5     |    |  picture  |   |
 |__________|__________|    |     1     |   |
 |    3     |    6     |    |___________|   |
 |__________|__________|____________________|


  __________________________________________
 |__________|__________|____________________|
 |    1     |    4     |     ___________    |
 |__________|__________|    |           |   |
 |    2     |  **5**   |    |  picture  |   |
 |__________|__________|    |     5     |   |
 |    3     |    6     |    |___________|   |
 |__________|__________|____________________|

И так далее.

Чтобы уточнить, я хочу, чтобы изображение по умолчанию отображалось при первой загрузке страницы. Я хочу, чтобы текст каждой ячейки таблицы имел уникальное соответствующее изображение (1.png, 2.png и т. Д.), И я хочу, чтобы каждое изображение было невидимым до тех пор, пока соответствующий текст не окажется над ним. То есть, 3.png показывает только когда наведено «3», 4.png показывает только когда наведено «4» и так далее. Если ничего не зависло, изображение по умолчанию показывает.

Есть ли способ сделать это, используя только HTML и CSS?

Вот код, который у меня есть:

HTML:

<div class="header">
  <p>hey</p>
</div>
<div class="main">
  <table>
    <tbody>
        <tr>
            <td class="category">Heading 1</td>
            <td class="category">Heading 2</td>
            <td class="category">Heading 3</td>
            <td class="image" rowspan="2">
                <img src="default.png" alt="default">
                <img src="1.png" alt="1">
                <img src="2.png" alt="2">
                <img src="3.png" alt="3">
                <img src="4.png" alt="4">
                <img src="5.png" alt="5">
                <img src="6.png" alt="6">
            </td>
        </tr>
        <tr>
            <td>
                <table class="options">
                    <tbody>
                        <tr>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="options">
                    <tbody>
                        <tr>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>5</td>
                        </tr>
                        <tr>
                            <td>6</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
 </table>

Извините за дамп кода. Я бы также опубликовал свой CSS-файл, но он вызывает некоторые ошибки, и поэтому я задаю вопрос.

Answer 1

Вот HTML решение CSS:

.main {
  max-width: 400px;
  margin: 50px auto;
  position: relative;
}

.image, image,
.options img {
  position: absolute;
  display: block;
  top: 40px;
  right: 70px;
}
.options img{
  z-index: -1;
  display: none;
}
a {
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid green;
  cursor: pointer;
}
a:hover + img {
  display: block;
  z-index: 1;
}

<div class="header">
  <p>hey</p>
</div>
<div class="main">
  <table>
    <tbody>
        <tr>
            <td class="category">Heading 1</td>
            <td class="category">Heading 2</td>
            <td class="category">Heading 3</td>
            <td class="image" rowspan="2">
                <img src="https://via.placeholder.com/150?text=default" alt="default">
            </td>
        </tr>
        <tr>
            <td>
                <table class="options">
                    <tbody>
                        <tr>
                            <td><a>1</a><img src="https://via.placeholder.com/150?text=1" alt="1"></td>
                        </tr>
                        <tr>
                            <td><a>2</a><img src="https://via.placeholder.com/150?text=2" alt="2"></td>
                        </tr>
                        <tr>
                            <td><a>3</a><img src="https://via.placeholder.com/150?text=3" alt="3"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="options">
                    <tbody>
                        <tr>
                            <td><a>4</a><img src="https://via.placeholder.com/150?text=4" alt="4"></td>
                        </tr>
                        <tr>
                            <td><a>5</a><img src="https://via.placeholder.com/150?text=5" alt="5"></td>
                        </tr>
                        <tr>
                            <td><a>6</a><img src="https://via.placeholder.com/150?text=6" alt="6"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
 </table>

Я переместил изображения в ячейки таблицы.

Вот это FIDDLE на всякий случай ...