JavaScript — Как выделить текст и изображение в разных div при наведении курсора

Как выделить текст и изображение в разных div при наведении курсора

getElementById — это один из тех вызовов, который на самом деле делает то, что говорит. :-) Он получает элемент DOM по атрибуту id . Поскольку id должен быть уникальным, он получает один конкретный элемент, с которым вы затем можете взаимодействовать (например, устанавливая его свойства стиля).

Таким образом, часть вашей проблемы состоит в том, что у вас есть два элемента с идентификатором «TextSpan» и два элемента с идентификатором «imgsrc», что означает, что браузер будет делать что-то неопределенное, потому что вы не можете этого сделать .

В обработчике событий this будет указывать на элемент, в который вы поместили обработчик. Так что в ваших removeHighlight highlight и removeHighlight вы можете использовать this (вместо getElementById ), чтобы получить ссылку на элементы img DOM. Это просто оставляет текстовые.

Вы можете использовать соглашение об именах (например, «pan «и» imgsrc1 «,» imgrc1 «и» imgsrc2 «), поэтому обработчики будут выглядеть так:

 function hightlight() { var textid = this.id.replace("imgsrc", "textspan"); var text = document.getElementById(textid); text.style.color = "blue"; this.style.border = "1px solid blue"; } function removehightlight() { var textid = this.id.replace("imgsrc", "textspan"); var text = document.getElementById(textid); text.style.color = "black"; this.style.border = "0px solid blue"; } 

… или вы можете использовать атрибут (скажем, data-text ) в тегах img который дает идентификатор текстового поля, связанного с ним; вы можете получить атрибут из DOM-элемента следующим образом:

 var textid = this.getAttribute("data-text"); 

Пользовательские атрибуты недопустимы в HTML4 и ниже, но я никогда не встречал браузер, у которого были проблемы с ними. В HTML5 и выше вы можете иметь пользовательские атрибуты, если они начинаются с data- как указано выше. Поэтому, если проверка является частью вашей рабочей практики (и это, как правило, хорошая идея), вы можете подумать о том, чтобы начать использовать тип документа HTML5, если у вас нет особых причин оставаться с предыдущим (как, например, вам неудобно пользоваться тип документа для версии HTML5, которая еще не достигла стадии рекомендации кандидата). Многие из нас достаточно счастливы, чтобы идти вперед .

this не тот элемент, которым вы подключаете обработчики. Я забыл, я давно не использовал способ подключения обработчиков onmouseover= ( onmouseover= ). Но ниже работает:

Или из-за того, как вы прикрепляете обработчики, вы можете передать аргумент в функции, сообщая им, с кем они имеют дело:

 function hightlight(index) { var img = document.getElementById("imgsrc"   index); var text = document.getElementById("textspan"   index); text.style.color = "blue"; img.style.border = "1px solid blue"; } function removehightlight(index) { var img = document.getElementById("imgsrc"   index); var text = document.getElementById("textspan"   index); text.style.color = "black"; img.style.border = "0px solid blue"; } 

… где ваши onmouseover и onmouseout изменяются на:

 onmouseover="hightlight(1);" onmouseout="removehightlight(1);" onmouseover="hightlight(2);" onmouseout="removehightlight(2);" 

Вот живой пример .

Примечание : код, который вы нашли, использует события mouseover и mouseout . Имейте в виду, что они делают не совсем то, что вы, вероятно, ожидаете, и это может вас укусить, хотя конкретный способ их использования в основном хорош (вы выполняете больше работы, чем необходимо, но это нормально). Но предположим, что ваша разметка немного изменилась:

 {amp}lt;a href="#" class="btn-list"{amp}gt;{amp}lt;span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()"{amp}gt;11 {amp}lt;strong{amp}gt;Gurney{amp}lt;/strong{amp}gt; Drive{amp}lt;/span{amp}gt;{amp}lt;br /{amp}gt;{amp}lt;/a{amp}gt; 

Теперь есть элемент в промежутке, на котором вы смотрите эти события. Это означает, что, когда мышь пользователя перемещается слева направо, вы увидите серию событий наведения мыши, когда мышь перемещается над текстом «11 (пробел)», тогда ваш код будет видеть событие mouseout при перемещении мыши. в слово «Герни». Почему это происходит? Потому что мышь вышла за пределы span и превратилась в strong элемент. Затем он сразу увидит другое наведение мыши, потому что мышь перемещается над strong элементом, и событие наведения мыши mouseover в DOM, поэтому мы видим его на span . Это может вызвать мерцание, когда мышь перемещается в strong элемент и выходит из него.

В Internet Explorer есть события mouseenter и mouseleave , которые больше подходят для того, что вы делаете, но кто хочет использовать события, которые ограничены только одной маркой браузера? Ну, большинство хороших библиотек JavaScript эмулируют эти события даже в браузерах, которые не поддерживают их изначально, что приводит меня к …

Не по теме 1 :

Если вы только начинаете использовать JavaScript в браузерах, предупреждаю: есть ряд несоответствий и неловкости браузера (если это слово), которые могут сгладить библиотеки, такие как jQuery , Prototype , YUI , Closure или любая из нескольких других для тебя. За то, что вы делаете в этом вопросе, они не принесут огромной пользы. Но для более сложных вещей они могут сэкономить вам много времени и хлопот, используя хорошую работу, которую многие другие сделали до вас. Как, например, эмуляция mouseenter и mouseleave в браузерах, которые их не поддерживают. :-) Я точно знаю, что jQuery и Prototype делают это для вас, и я подозреваю, что другие тоже.

Не по теме 2 :

Это «подсветка», а не «подсветка». Если кому-то понадобится позже поддержать ваш код, эта опечатка (которая непротиворечива, и поэтому не является ошибкой!) Вполне может сбить его с толку. Отдельно, стандартная практика (которую вы можете игнорировать!) — использовать слова camelCase в именах функций, поэтому removeHighlight а не removehightlight . FWIW.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector