Как получить слово под курсором с помощью JavaScript?
Если я, например, имею
<p> some long text </p>
на моей странице HTML, как я могу знать, что курсор мыши является, например, выше слова 'текстом'?
3 ответа
В дополнение к двум другим ответам вы можете разделить свои абзацы на части с помощью jQuery (или javascript в целом).
Таким образом, вам не нужно думать о выводе текста с интервалами вокруг слов. Пусть ваш javascript сделает это за вас.
например.
<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>
<script type="text/javascript">
$(function() {
// wrap words in spans
$('p').each(function() {
var $this = $(this);
$this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});
// bind to each span
$('p span').hover(
function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
function() { $('#word').text(''); $(this).css('background-color',''); }
);
});
</script>
Обратите внимание, что приведенный выше код, пока он работает, удаляет любой HTML-код внутри тегов абзаца.
Насколько мне известно, вы не можете.
Единственное, что я могу придумать, это поместить каждое слово в отдельный элемент, а затем применить события наведения мыши на эти элементы.
<p><span>Some</span> <span>long</span> <span>text</span></p>
<script>
$(document).ready(function () {
$('p span').bind('mouseenter', function () {
alert($(this).html() + " is what you're currently hovering over!");
});
});
</script>
Вам, вероятно, придется разбить абзац так, чтобы каждое слово содержалось внутри отдельного элемента , а затем добавить onmouseover атрибутов события для каждого из них.
.. И я думаю, вы имеете в виду "
какой-то длинный текст
"; обратная косая черта не является частью HTML.