0
176
Vistas¿Ocultar todos los tramos que están cerca del cursor al pasar el mouse?
Estoy trabajando en un proyecto en el que tengo varios cientos de tramos uno al lado del otro, con una letra del texto en cada tramo. Cuando paso el cursor sobre uno de los tramos, quiero ocultarlo, así como los otros tramos cercanos.
Hace una imagen como esta:
@@@@@@@@@@@@@@ @@@@@@@@@@@@@@ @@@@@@@@@@@@@@ @@@@@@@@@@@@@@Mi objetivo es ocultar todos los tramos en una distancia dada lejos del mouse, así:
HTML
<span id="overlay-1">@</span> <!-- ... --> <span id="overlay-142">@</span> <span id="overlay-143">@</span> Puedo ocultar 1 de los tramos llamando a sus ID al pasar el mouse y cambiando el estilo a display=none , pero quiero ocultar todos los que están muy cerca del mouse. ¿Alguna idea sobre lo que debo hacer?
3 Respuestas
Responde la pregunta0
Traté de resolver esto a través de JS. Aquí está mi código:
function paint() { let txt = ""; for (let j = 0; j < 100; j++) { txt += "<div>" for (let i = 0; i < 100; i++) { txt += `<span onmouseout="hoverOut()" onmouseover="hover(this)" onmouseuop id="overlay-${i}-${j}">@</span>` } txt += "</div>" } document.getElementById('painting').innerHTML += txt } function hover(x) { let id = x.id; let i = x.id.split('-')[1]; let j = x.id.split('-')[2]; for (let a = -2; a <= 2; a++) { for (let b = -1; b <= 1; b++) { const elem = document.getElementById(`overlay-${ia}-${jb}`); elem ? elem.style.opacity = 0 : null; } } x.style.opacity = '0'; } function hoverOut() { for (let i = 0; i < document.getElementsByTagName('span').length; i++) { document.getElementsByTagName('span')[i].style.opacity = 1; } } <body onload="paint()"> <div id="painting"> </div> </body>0
Otro enfoque sin usar id s sería usar Element.getBoundingClientRect() para obtener el tamaño y la posición del elemento sobre el que se encuentra y luego usar Document.elementFromPoint() dentro de un ciclo para acceder a los elementos cerca del elemento sobre el que se encuentra:
const main = document.querySelector('main') for (let i = 0; i < 800; i++) main.innerHTML += '<span>@</span>' const spans = document.querySelectorAll('span') const areaWidth = 50 const areaHeight = 50 const hidden = [] function getElements(currentSpan, color) { const { top, right, bottom, left, width, height } = currentSpan.getBoundingClientRect() for (let col = left - areaWidth / 2; col < right + areaWidth / 2; col += width || 14) { for (let row = top - areaHeight / 2; row < bottom + areaHeight / 2; row += height || 14) { const el = document.elementFromPoint(col, row) if (el?.tagName === 'SPAN') { el.style.color = color hidden.push(el) } } } } spans.forEach(span => { span.addEventListener('mouseover', () => getElements(span, 'transparent')) span.addEventListener('mouseout', () => { hidden.forEach(el => (el.style.color = '')) hidden.length = 0 }) }) main { display: flex; flex-wrap: wrap; width: 640px; cursor: default; } <main></main>0
Podría usar una solución CSS: sobrescriba los caracteres adyacentes con un pseudo elemento en el carácter en el que se hizo clic.
Este fragmento utiliza una fuente monoespaciada y establece la altura de línea y el espaciado entre letras como variables CSS para que pueda modificarlas según sea necesario.
function clicked(ev) { ev.target.classList.add('obscure'); } const container = document.querySelector('.container'); for (let i = 0; i < 200; i++) { const span = document.createElement('span'); span.innerHTML = '@'; if (i % 10 == 0) { container.innerHTML += '<br>'; } container.appendChild(span); } container.addEventListener('click', clicked); .container { width: 50vw; height: auto; font-family: Courier, monospace; --line-height: 20px; --letter-spacing: 5px; line-height: var(--line-height); letter-spacing: var(--letter-spacing); } .container span { position: relative; margin: 0; padding: 0; } .obscure::before { content: ''; width: calc(5ch + (6 * var(--letter-spacing))); height: calc(3 * var(--line-height)); background-color: white; position: absolute; top: 0; transform: translate(calc(-50% + 0.5ch), calc(-50% + (1ch))); left: 0; z-index: 1; display: inline-block; } <body> <div class="container"></div> </body>