Estoy probando jQuery y quiero actualizar una imagen cuando paso el cursor sobre un div o bloque de enlace específico.
Entonces, lo que estaba tratando de hacer es al pasar el mouse sobre .test-block, obtener el texto oculto con la URL y actualizarlo en .large-image-2. Parece que no puede obtener el texto específico al pasar el mouse.
Este es el código que he encontrado:
$('.test-block').on('onmouseenter', function() { let myUrl = $(this).find('.display-hidden').text(); $('.url').text(myUrl); });Estoy probando en esta página: https://jquery-testing.webflow.io/update-image los tres div inferiores y la imagen inferior a la derecha es lo que quiero usar.
¡Gracias por adelantado!
Hay algunos problemas con su ejemplo. Principalmente la forma en que registra el controlador de eventos.
Para jQuery, la forma correcta sería $(target).on('mouseenter') - Omita la parte on... para el evento que desea registrar al hacerlo a través de jQuery.
Probablemente implementaría la funcionalidad que está buscando de una manera menos específica y con identificadores más simples como el siguiente:
$(function () { let divs = $('[data-image-target][data-image-url]'); divs.on('mouseenter', function () { let that = $(this) const target = that.data('image-target') const url = that.data('image-url') $(target).attr('src', url); }) divs.first().trigger('mouseenter') }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-image-target="#my-target-image" data-image-url="https://dummyimage.com/600x400/000/fff&text=one"> Hover One </div> <div data-image-target="#my-target-image" data-image-url="https://dummyimage.com/600x400/000/fff&text=two"> Hover Two </div> <div data-image-target="#my-target-image" data-image-url="https://dummyimage.com/600x400/000/fff&text=three"> Hover Three </div> <img id="my-target-image"> En mi ejemplo, se utilizan dos atributos de datos: data-image-target y data-image-url .
El uso de atributos de datos en los elementos en los que desea que se active el evento hará que su secuencia de comandos sea un poco más robusta y menos propensa a errores, ya que el registro del evento está vinculado a los dos atributos que están presentes usando selectores de atributos para el selector jQuery $([data-image-target][data-image-url]) en lugar de nombres de clase y/o identificadores arbitrarios.
El data-image-target debe tener un selector de CSS que apunte a los elementos <img> que desea activar en la URL de origen, mientras que la URL de la imagen data-image-url debe contener la URL de la imagen a la que desea cambiar. .
El código anterior podría incluso reemplazar su funcionalidad existente para las 3 imágenes principales en su página.
Este código funcionó
$(function () { let divs = $('[data-image-target][data-image-url]'); divs.on('mouseenter', function () { let that = $(this); const target = that.data('image-target'); const url = that.data('image-url'); $(target).attr('src', url); }); });Gracias a Morten por proporcionar. Con Webflow también tuve que hacer Command + Shift + O para desactivar la capacidad de respuesta a la imagen. (cuando está en la configuración de imagen)
Atributos: Nombre: data-image-target Valor: #my-target-image Y Nombre: data-image-url Valor: (url de imagen, en mi caso Webflow: https://uploads-ssl.webflow.com/something ) Estos dos atributos a cada elemento flotante.
Nombre: id Valor: my-target-image Esto al elemento de imagen para mostrar imágenes. (si Webflow; "my-target-image" va en el campo ID en la configuración del elemento.