0
178
VistasPase el cursor sobre el elemento dentro de la etiqueta de anclaje sin seleccionar la etiqueta de anclaje. JS o CSS
Estoy trabajando en un tema de Shopify donde necesito seleccionar el precio del producto y colocar el cursor sobre él para obtener información sobre herramientas. pero el problema es que todos esos productos están dentro de una etiqueta de anclaje. He intentado encontrar una solución pero no hay mucha información al respecto. Evento de puntero probado: ninguno; pero esto hace que el ancla ya no funcione. Necesito que la etiqueta de anclaje funcione y, al mismo tiempo, necesito el efecto de desplazamiento sobre el precio sin seleccionar la etiqueta de anclaje porque esa etiqueta de anclaje está dentro de un tema y la selección causará problemas para diferentes temas. ASÍ que hice una simulación de Codepen para ello. verifique a continuación y avíseme si es posible con CSS o js, no importa. Gracias.
quiero pasar el cursor sobre esta caja
a { font-family: sans-serif; text-decoration: none; color: black; } .card { width: 400px; margin: 20px auto; background: white; box-shadow: 0 0 5px 2px #999; border-radius: 4px; padding: 10px; text-align: center; } .card img { width: 100%; height: 220px; object-fit: cover; } .price-group { margin: 20px 0 5px; padding: 20px 0; background: #ddd; } <a href=""> <div class="card"> <img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg" alt=""> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi, alias. </p> <div class="price-group"> <span class="title">Sample Product</span> <span class="price">$100</span> </div> </div> </a>1 Respuestas
Responde la pregunta0
Si entiendo correctamente, está buscando poder hacer clic en el precio sin activar el ancla, sin perder la funcionalidad del ancla.
Esto se puede hacer usando stopPropagation y preventDefault
Puede en cierto modo 'enmascarar' el desplazamiento del ancla, sobrescribiendo las acciones de desplazamiento del ancla (sin embargo, mala UX)
function check(event) { // prevent acheck or other functions of anchor event.stopPropagation(); // stops href redirection event.preventDefault(); console.log('inner') } function acheck(event) { console.log('anchor') } a { font-family: sans-serif; text-decoration: none; color: black; } .card { width: 400px; margin: 20px auto; background: white; box-shadow: 0 0 5px 2px #999; border-radius: 4px; padding: 10px; text-align: center; } .card img { width: 100%; height: 220px; object-fit: cover; } .price-group { margin: 20px 0 5px; padding: 20px 0; background: #ddd; } .price-group:hover { background: red; cursor: pointer; } a:hover { cursor: default; } <a href=""> <div class="card" onclick='acheck(event)'> <img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg" alt=""> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi, alias. </p> <div class="price-group" onclick='check(event)'> <span class="title">Sample Product</span> <span class="price">$100</span> </div> </div> </a>