Как изменить фоновое изображение таблицы при наведении курсора мыши на другую ссылку

#javascript #css #mouseover #css-tables

#javascript #css #наведение курсора мыши #css-таблицы

Вопрос:

У меня есть это для изменения фонового изображения div.fullscreen :

 <div id="swatches">
  <a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
    <img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
         onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390-    linux/hercules-s390/ssh-dasd1.png';"
         width="72" height="54" alt="Item ksc1" />
  </a>
</div>

Однако есть ли способ изменить фоновое изображение таблицы на hover другой ссылке на изображение?

1. Учитывая, что вы уже используете JavaScript, почему вы не готовы принять решение, отличное от CSS («Только CSS» из названия вашего вопроса)?

2. Извинения. Я забыл, что использовал некоторые JS, но обычно предпочитаю css, поскольку в некоторых браузерах javascript отключен. В зависимости от того, что наиболее эффективно, было бы большое спасибо! О, и вопрос был исправлен сразу. Ta!

Ответ №1:

Конечно, посмотрите на пример здесь.

Это делается путем указания img an id и table an id . Затем мы слушаем, когда мышь находится над img и когда это произойдет, измените background-image из table .

Хотите использовать только встроенный JavaScript? Используйте это:

 <div id="swatches">
  <a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
    <img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
         onmouseover='document.getElementById("table_id_here").style["background-image"]="url('http://www.gravatar.com/avatar/');'
         width="72" height="54" alt="Item ksc1" />
  </a>
</div>

1. Привет, Шаз, похоже, не получается заставить это работать. Пожалуйста, смотрите: zabb.co.uk/untitled20.html Большое спасибо за все ваши усилия до сих пор..

2. @Kelly Удалите функцию $(document) ready, затем переместите единственный script блок после таблицы (прямо над конечным тегом body)