Изменение <td> фонового цвета при наведении на изображение

Question

Я ищу функциональность, описанную в теме. Когда пользователь наводится над изображением (id = "sie"), фон ячейки таблицы (id = "sein_img") должен измениться. Я пробовал использовать этот код, но я не уверен, почему он не работает. Помощь очень ценится!

<script type="text/javascript"> 
      document.getElementById("sein_img").onmouseover = function() { 
       document.getElementById("sie").style.backgroundColor = "red"; 
      } 
    </script> 

<td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td> 

<img id="sein_img" src="images/stories/bullet_white.png" /> 

Answer 1

Ваш скрипт работает прекрасно, но только если вы выполняете <script> после инициализации затронутых HTML тегов (в вашем случае <div> с идентификатором sein_img). Элемент еще не доступен, поэтому Mouseover слушатель не установлен элемент (элемент, который вы получаете с document.getElementById() является undefined

Таким образом, чтобы решить вашу проблему, вы можете выбрать между этими 2-х вариантов:.

1. Переместите тэг <script> в нижней части страницы или, по крайней мере, после последнего элемента, который вы хотите установить для прослушивателя.
2. Подождите, пока документ будет готов, прежде чем устанавливать прослушиватель в элемент. jQuery ($(document).ready(function() { ... });)

Answer 2

Переместить сценарий для выполнения после рендеринга вашего html. Я думаю, что он будет работать только с действительной таблицей html.

<table><tr><td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td></tr></table> 

<script type="text/javascript"> 
     document.getElementById("sein_img").onmouseover = function() { 
      document.getElementById("sie").style.backgroundColor = "red"; 
     } 
</script> 

Answer 3

Вам необходимо написать это <script /> после html-кодов. Вы можете проверить this plunker.

Answer 4

Проблема заключается в том:

1. Вы доступ к элементам до их создания.
2. Вы должны поместить элемент в таблицу , иначе его атрибуты не будут интерпретироваться (в данном случае это идентификатор и стиль).

<table> 
 
    <td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td> 
 
</table> 
 
<img id="sein_img" src="images/stories/bullet_white.png" /> 
 
<script type="text/javascript"> 
 
    document.getElementById("sein_img").onmouseover = function() { 
 
    document.getElementById("sie").style.backgroundColor = "red"; 
 
    } 
 
</script>

Если вы просто поставить метку в нижней части тела, код не будет работать.

<td id="sie" style="background-color: #f3f5f7;">&nbsp;sie</td> 
 
<img id="sein_img" src="images/stories/bullet_white.png" /> 
 
<script type="text/javascript"> 
 
    document.getElementById("sein_img").onmouseover = function() { 
 
     document.getElementById("sie").style.backgroundColor = "red"; 
 
    } 
 
</script>