Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Question

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but also others nearby.

This setup produces an image resembling the following:

@@@@@@@@@@@@@@  
@@@@@@@@@@@@@@  
@@@@@@@@@@@@@@  
@@@@@@@@@@@@@@

The objective here is to conceal all spans within a specific distance from the mouse pointer, as illustrated in this example:

In terms of HTML structure:

<span id="overlay-1">@</span>
<!-- ... -->
<span id="overlay-142">@</span>
<span id="overlay-143">@</span>

I have managed to hide individual spans by targeting their IDs upon mouseover and modifying the style property to display=none. However, my main challenge lies in hiding all spans located close to the mouse cursor. Do you have any suggestions or solutions for this issue?

javascript html css

Answer 1

Answer №1

I attempted to tackle this challenge using JavaScript. Below is the code I came up with:

function draw() {
    let content = "";
    for (let col = 0; col < 100; col++) {
        content += "<div>"
        for (let row = 0; row < 100; row++) {
            content += `<span onmouseout="hoverOff()" onmouseover="hoverOver(this)" id="overlay-${row}-${col}">@</span>`
        }
        content += "</div>"
    }
    document.getElementById('drawing').innerHTML += content
}

function hoverOver(element) {
    let id = element.id;
    let row = element.id.split('-')[1];
    let col = element.id.split('-')[2];
    
    for (let x = -2; x <= 2; x++) {
        for (let y = -1; y <= 1; y++) {
            const item = document.getElementById(`overlay-${row-x}-${col-y}`);
            item ? item.style.opacity = 0 : null;
        }
    }
    element.style.opacity = '0';
}

function hoverOff() {
    for (let i = 0; i < document.getElementsByTagName('span').length; i++) {
        document.getElementsByTagName('span')[i].style.opacity = 1;
    }
}

<body onload="draw()">
    <div id="drawing">
    </div>
</body>

Answer 2

I attempted to tackle this challenge using JavaScript. Below is the code I came up with:

function draw() {
    let content = "";
    for (let col = 0; col < 100; col++) {
        content += "<div>"
        for (let row = 0; row < 100; row++) {
            content += `<span onmouseout="hoverOff()" onmouseover="hoverOver(this)" id="overlay-${row}-${col}">@</span>`
        }
        content += "</div>"
    }
    document.getElementById('drawing').innerHTML += content
}

function hoverOver(element) {
    let id = element.id;
    let row = element.id.split('-')[1];
    let col = element.id.split('-')[2];
    
    for (let x = -2; x <= 2; x++) {
        for (let y = -1; y <= 1; y++) {
            const item = document.getElementById(`overlay-${row-x}-${col-y}`);
            item ? item.style.opacity = 0 : null;
        }
    }
    element.style.opacity = '0';
}

function hoverOff() {
    for (let i = 0; i < document.getElementsByTagName('span').length; i++) {
        document.getElementsByTagName('span')[i].style.opacity = 1;
    }
}

<body onload="draw()">
    <div id="drawing">
    </div>
</body>

Answer 3

Answer №2

To achieve this without relying on specific ids, an alternative method involves utilizing the Element.getBoundingClientRect() function to determine the size and location of the element being hovered over. Subsequently, the use of Document.elementFromPoint() within a loop allows for accessing elements in close proximity to the target:

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>

Answer 4

To achieve this without relying on specific ids, an alternative method involves utilizing the Element.getBoundingClientRect() function to determine the size and location of the element being hovered over. Subsequently, the use of Document.elementFromPoint() within a loop allows for accessing elements in close proximity to the target:

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>

Answer 5

Answer №3

If you're looking to hide adjacent characters upon clicking, one solution could be using CSS to overwrite those characters with a pseudo element.

This code snippet utilizes a monospace font and defines line height and letter spacing as CSS variables, allowing for easy customization.

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>

Answer 6

If you're looking to hide adjacent characters upon clicking, one solution could be using CSS to overwrite those characters with a pseudo element.

This code snippet utilizes a monospace font and defines line height and letter spacing as CSS variables, allowing for easy customization.

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>

Answer 7

Answer №4

It seems like you're looking to make the span disappear without affecting the layout. Using display:none won't achieve this, but visibility:hidden will do the trick.

Hiding the hovered element and its adjacent elements is straightforward. The real challenge lies in hiding elements above or below it.

To accomplish this, some calculations are necessary.

If an exact solution isn't required, you could try something like this:

Determine the center positions of all spans and store them in an array to avoid recalculating each time.
When a span is hovered over, identify all spans within a certain radius of that span's center point - whether above, below, left, or right.
Create a new array of spans to hide based on the previous step.
Review all currently hidden spans and unhide any that aren't included in the new array (set visibility:visible).
Finally, loop through the new array and set visibility:hidden for all spans in that array.

Answer 8

It seems like you're looking to make the span disappear without affecting the layout. Using display:none won't achieve this, but visibility:hidden will do the trick.

Hiding the hovered element and its adjacent elements is straightforward. The real challenge lies in hiding elements above or below it.

To accomplish this, some calculations are necessary.

If an exact solution isn't required, you could try something like this:

Determine the center positions of all spans and store them in an array to avoid recalculating each time.
When a span is hovered over, identify all spans within a certain radius of that span's center point - whether above, below, left, or right.
Create a new array of spans to hide based on the previous step.
Review all currently hidden spans and unhide any that aren't included in the new array (set visibility:visible).
Finally, loop through the new array and set visibility:hidden for all spans in that array.

Answer 9

Answer №5

Here is a unique and customizable approach:

// Customizing Variables
const ROW = 10; // Total number of rows available
const COL = 35; // Total number of items in each row
const RANGE = 2; // Number of items to be selected in each direction
const values = []; // Array to store ids of selected items

// Utility Function to add values to the array
const push = (value) => {
  if (value > 0 && value <= ROW * COL && !values.includes(value)) values.push(value);
};

// Adding items in the root div
const root = document.querySelector("#root");

for (let i = 0; i < ROW; i++) {
  root.innerHTML += `<div id="row-${i + 1}"></div>`;

  for (let j = 0; j < COL; j++) {
    document.querySelector(`#row-${i + 1}`).innerHTML += `<span id="item-${COL * i + (j + 1)}">@</span>`;
  }
}

// Adding class to the items based on the RANGE
root.addEventListener("mouseover", (e) => {
  values.length = 0;

  const id = e.target.id;
  if (!id.includes("item-")) return;

  const current = +id.replace("item-", "");
  push(current);

  for (let i = -RANGE; i < RANGE; i++) {
    push(current + i);

    for (let j = -RANGE; j <= RANGE; j++) {
      push(current + COL * i + j);
      push(current - COL * i + j);
    }
  }

  for (let i = 0; i < values.length; i++) {
    const item = document.querySelector(`#item-${values[i]}`);
    item.classList.add("selected");
  }
});

// Removing class from the items once the mouse is out as per the RANGE
root.addEventListener("mouseout", () => {
  for (let i = 0; i < values.length; i++) {
    const item = document.querySelector(`#item-${values[i]}`);
    item.classList.remove("selected");
  }
});

/* Styling purpose only */
body {
  background-color: #111;
  color: #fff;
}

#root [id*="item-"] {
  padding: 1px;
}

/* Styles for the selected item */
#root [id*="item-"].selected {
  /* color: transparent; */ /* You can uncomment this line for desired effect */
  color: #ffa600;
}

<div id="root"></div>

Answer 10

Here is a unique and customizable approach:

// Customizing Variables
const ROW = 10; // Total number of rows available
const COL = 35; // Total number of items in each row
const RANGE = 2; // Number of items to be selected in each direction
const values = []; // Array to store ids of selected items

// Utility Function to add values to the array
const push = (value) => {
  if (value > 0 && value <= ROW * COL && !values.includes(value)) values.push(value);
};

// Adding items in the root div
const root = document.querySelector("#root");

for (let i = 0; i < ROW; i++) {
  root.innerHTML += `<div id="row-${i + 1}"></div>`;

  for (let j = 0; j < COL; j++) {
    document.querySelector(`#row-${i + 1}`).innerHTML += `<span id="item-${COL * i + (j + 1)}">@</span>`;
  }
}

// Adding class to the items based on the RANGE
root.addEventListener("mouseover", (e) => {
  values.length = 0;

  const id = e.target.id;
  if (!id.includes("item-")) return;

  const current = +id.replace("item-", "");
  push(current);

  for (let i = -RANGE; i < RANGE; i++) {
    push(current + i);

    for (let j = -RANGE; j <= RANGE; j++) {
      push(current + COL * i + j);
      push(current - COL * i + j);
    }
  }

  for (let i = 0; i < values.length; i++) {
    const item = document.querySelector(`#item-${values[i]}`);
    item.classList.add("selected");
  }
});

// Removing class from the items once the mouse is out as per the RANGE
root.addEventListener("mouseout", () => {
  for (let i = 0; i < values.length; i++) {
    const item = document.querySelector(`#item-${values[i]}`);
    item.classList.remove("selected");
  }
});

/* Styling purpose only */
body {
  background-color: #111;
  color: #fff;
}

#root [id*="item-"] {
  padding: 1px;
}

/* Styles for the selected item */
#root [id*="item-"].selected {
  /* color: transparent; */ /* You can uncomment this line for desired effect */
  color: #ffa600;
}

<div id="root"></div>

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Adjusting the background color of a MuiList within a React Material-UI Select component

The JavaScript script to retrieve the background color is malfunctioning

Ways to turn off hover highlighting

What is the best way to send information using an array of objects?

Is there a way to showcase whitespacing in HTML?

What steps should I take to design and implement this basic search form?

What is the method for specifying the HTML file extension within Visual Studio?

"User-friendly Material-UI input field paired with a clear label

What is the best way to emphasize a certain row within XSLT?

Using array map to create a centered table in a React web application

Leverage the retrieved configuration within the forRoot function

Stylish Sudoku Grid Design with CSS-Grid Borders

Storing information in a database using Phantomjs

Practical strategy for developing and launching a TypeScript/Node.js application

Activate the button to effortlessly load pages with a visually engaging animation

Unable to retrieve the complete count of invitations made by a user

How can I access the id_lang variable in React JS from outside its scope?

Steps for sending a request to the root resource

The webpage is unreachable on localhost after attempting to write to a file using node.js

Struggling with the migration of routes from react-router v3 to v4