javascript - por - mostrar texto al pasar el mouse sobre una imagen html

Resalte una palabra individual dentro de un bloque de texto al pasar el mouse

Question

En javascript / jQuery, ¿hay una manera de identificar una palabra en un bloque de texto / párrafo? Por ejemplo, digamos que tengo el siguiente párrafo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit interdum fermentum. Aenean fermentum imperdiet augue, et venenatis lectus semper vel. Phasellus faucibus nulla in quam egestas eleifend. Cras tristique augue eget libero tristique condimentum. Mauris eget diam eget risus feugiat rutrum. Duis placerat lorem quis augue semper porttitor. Nullam iaculis dui feugiat erat condimentum rutrum. Sed en accumsan diam. Maecenas ut urna id velit posuere auctor in vel dui. Aenean consectetur dui in leo faucibus sed feugiat dui blandit. En accumsan diam vitae erat volutpat volutpat aliquam nunc euismod. Vivamus viverra lorem nulla. Quisque justo quam, adipiscing sit amet auctor non, laoreet sit amet nisl. Donec euismod lorem ac mi dictum volutpat. Donec ligula mi, varius ac auctor at, sollicitudin id elit. En auctor sodales ipsum nec consectetur. Sed lacinia varius nibh vitae vulputate.

Si muevo el cursor del mouse sobre la primera palabra, "Lorem", me gustaría que aparezca en negrita (por ejemplo). Básicamente, me gustaría que solo el texto sobre el que se encuentra el cursor tenga una propiedad CSS agregada al pasar el mouse, luego se elimine esa propiedad CSS cuando el cursor ya no está encima de esa palabra.

La única forma en que puedo pensar en hacer esto es agregar una etiqueta <span> entre cada palabra. ¿Es esta la única manera? ¿Existe alguna forma más eficiente, o el evento mouseover de jQuery solo funciona dentro de las etiquetas? ¿Puede funcionar en la identificación de bloques de texto?

Answer 1

Esa es la única manera en que puedo pensar. Es posible que pueda hacer algo con los eventos del mouse y la ubicación del mouse (intentar averiguar qué palabra está en la ubicación), pero no sería lo más divertido intentarlo. Probablemente necesite agregar algunas etiquetas alrededor de las palabras para los puntos de referencia.

Si va a dividirlo en elementos, sugeriría usar una etiqueta de un solo carácter, como <p> .

Otra opción intermedia sería solo el evento over en el contenedor, y solo dividir el texto en subelementos si el usuario se desplaza. Algo como:

$(''#container'').live(''mouseenter'',function(){
var jThis = $(this);
var text = jThis.text();
jThis.attr(''original'',text);
text = text.split('' '');
var out_text = '''';
for(var nI = 0; nI < text.length; nI++){
out_text += "<p>"+text[nI]+"</p>";
}
jThis.html(out_text);
});
$(''#container p'').live(''mouseenter'',function(){
$(this).addClass(''highlight'');
});

Necesitarías agregar los eventos de salida también.

Answer 2

Esta es una técnica que he usado que envuelve etiquetas de separación alrededor de todas las palabras en un elemento principal para que puedan resaltarse al pasar el cursor:

const parentElement = document.getElementById(''parent'');

parentElement.onmouseover = e => {
  e.target.innerHTML = e.target.innerText.replace(/([/w]+)/g, ''<span>$1</span>'');
};

p#parent span:hover {
  background: yellow;
  cursor: pointer;
}

<p id="parent">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What''s happened to me?" he thought. It wasn''t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. </p>

Este código agrega un controlador de clic para las palabras en los elementos de la lista:

parentElement.onmouseover = e => {
  if (e.target.nodeName === ''LI'') {
    e.target.innerHTML = 
      e.target.innerText.replace(/([/w]+)/g, ''<span>$1</span>'');
    e.target.onclick = e => {
      doSomething(e.target.textContent);
    };
  }
}

Answer 3

Esto parece una buena tarea para http://letteringjs.com/

Puede configurarlo para crear los espacios para usted en las barreras de palabras.

JSFiddle con su ejemplo: http://jsfiddle.net/3HdKH/

De su tutorial: https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29

Utilizando:

$(document).ready(function() {
  $(".word_split").lettering(''words'');
});

Esta

<p class="word_split">Don''t break my heart.</p>

Se convierte en

<p class="word_split">
  <span class="word1">Don''t</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Luego puedes usar el siguiente CSS:

.word_split span:hover {
    font-weight:bold;
}

Answer 4

La única forma en que puede hacer esto es con tramos (como lo describió). Javascript ve el bloque de texto como un elemento a menos que se rompa. Solo puedes hacer cosas sobre elementos. Dado que todos los flujos de texto y dosent tienen una posición, no se puede identificar la posición de la palabra individual para ver cuándo está flotando. A menos que su texto sea enorme, algunos saltos de espacio adicionales no deberían ser un gran problema para el rendimiento.

Answer 5

$("p:contains(Lorem)").each(function(){
  $(this).html($(this).text().replace(/(Lorem)/, ''<span class="highlightWord">$1</span> ''));
});

Esta tomado desde here

Answer 6

$(''span'').each(function(){
    $(this).html(
            $(this)
                .text()
                .split('' '')
                .map(function(x){return "<word>"+x+"</word>";})
                .join('' '')
       )
});
$(''word'').hover(function(){
        $(this).css(/*highlight*/);            
},function(){
        $(this).css(/*de-highlight*/);   
});