Alter the color of the text when hovering over it, only in the area where the

Question

Alter the color of the text when hovering over it, only in the area where the

Is there a way to change the color of text only where the mouse is placed, without affecting the entire text? Similar to this example

https://i.sstatic.net/vdYEn.png

I'm looking to have a circle follow the mouse, and when hovering over text, only the border of the letter in that section should be shown.

Can anyone suggest which library or function I should use for this purpose?

javascript html jquery css

Answer 1

Answer №1

const fx = document.querySelector(".fx");

document.addEventListener("pointermove", e => {
  fx.style.top = e.clientY + "px";
  fx.style.left = e.clientX + "px";
  fx.querySelector("h1").style.transform = `translate(${(e.clientX - fx.getBoundingClientRect().width / 2) * -1}px, ${(e.clientY - fx.getBoundingClientRect().height / 2) * -1}px)`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
}

.container h1 {
  font-size: 10rem;
  color: red;
}

.container .fx {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
}

.container .fx h1 {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
  position: relative;
}

<div class="container">
  <h1>abc</h1>
  <div class="fx">
    <h1>abc</h1>
  </div>
</div>

this is just a demonstration of an interactive effect using JavaScript and CSS. To implement this in your project, you will need additional logic and a good understanding of two-dimensional concepts. The key idea is to have two elements, one for display (like the h1) and another for the visual effect (inside the fx div). To achieve the effect shown here, ensure that the precise pixel positioning of the container and the background color of fx match the parent element's background color. By adding a mousemove event listener to the parent container (document in this demo), you can make the fx div follow the cursor using its top and left properties set to e.clientY and e.clientX. The challenge lies in making the h1 inside fx stay stationary while following the cursor movement. This is achieved by translating the fx's h1 based on the cursor position relative to the container, as demonstrated with

fx.querySelector("h1").style.transform = ...

. I recommend running through the demo step by step to fully grasp how it works.

Update

An enhanced version of the initial demo has been provided above, offering more flexibility in implementation. Simply copy/paste the code snippets and customize the css properties of the h1 element according to your needs.

const glass = document.querySelector(".magnifying-glass"),
    container = document.querySelector(".container"),
    cInfo = container.getBoundingClientRect();

document.addEventListener("pointermove", e => {
    glass.style.opacity = 1;
    glass.style.transform = `translate(
            ${e.clientX - cInfo.x - (glass.getBoundingClientRect().width / 2)}px, 
            ${e.clientY - cInfo.y - (glass.getBoundingClientRect().height / 2)}px
        )`;
    glass.querySelector("h1").style.transform = `translate(
            ${(e.clientX - (glass.getBoundingClientRect().width / 2) - cInfo.x) * -1}px, 
            ${(e.clientY - (glass.getBoundingClientRect().height / 2) - cInfo.y) * -1}px
        )`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}

.container .display {
  font-size: 10rem;
  color: red;
}

.container .magnifying-glass {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
  opacity: 0;
}

.container .magnifying-glass .magnify-fx {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
}

<div class="container">
  <h1 class="display">abc</h1>
  <div class="magnifying-glass">
    <h1 class="magnify-fx">abc</h1>
  </div>
</div>

Answer 2

const fx = document.querySelector(".fx");

document.addEventListener("pointermove", e => {
  fx.style.top = e.clientY + "px";
  fx.style.left = e.clientX + "px";
  fx.querySelector("h1").style.transform = `translate(${(e.clientX - fx.getBoundingClientRect().width / 2) * -1}px, ${(e.clientY - fx.getBoundingClientRect().height / 2) * -1}px)`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
}

.container h1 {
  font-size: 10rem;
  color: red;
}

.container .fx {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
}

.container .fx h1 {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
  position: relative;
}

<div class="container">
  <h1>abc</h1>
  <div class="fx">
    <h1>abc</h1>
  </div>
</div>

this is just a demonstration of an interactive effect using JavaScript and CSS. To implement this in your project, you will need additional logic and a good understanding of two-dimensional concepts. The key idea is to have two elements, one for display (like the h1) and another for the visual effect (inside the fx div). To achieve the effect shown here, ensure that the precise pixel positioning of the container and the background color of fx match the parent element's background color. By adding a mousemove event listener to the parent container (document in this demo), you can make the fx div follow the cursor using its top and left properties set to e.clientY and e.clientX. The challenge lies in making the h1 inside fx stay stationary while following the cursor movement. This is achieved by translating the fx's h1 based on the cursor position relative to the container, as demonstrated with

fx.querySelector("h1").style.transform = ...

. I recommend running through the demo step by step to fully grasp how it works.

Update

An enhanced version of the initial demo has been provided above, offering more flexibility in implementation. Simply copy/paste the code snippets and customize the css properties of the h1 element according to your needs.

const glass = document.querySelector(".magnifying-glass"),
    container = document.querySelector(".container"),
    cInfo = container.getBoundingClientRect();

document.addEventListener("pointermove", e => {
    glass.style.opacity = 1;
    glass.style.transform = `translate(
            ${e.clientX - cInfo.x - (glass.getBoundingClientRect().width / 2)}px, 
            ${e.clientY - cInfo.y - (glass.getBoundingClientRect().height / 2)}px
        )`;
    glass.querySelector("h1").style.transform = `translate(
            ${(e.clientX - (glass.getBoundingClientRect().width / 2) - cInfo.x) * -1}px, 
            ${(e.clientY - (glass.getBoundingClientRect().height / 2) - cInfo.y) * -1}px
        )`;
})

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}

.container .display {
  font-size: 10rem;
  color: red;
}

.container .magnifying-glass {
  width: 100px;
  height: 100px;
  outline: 1px solid blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: white;
  opacity: 0;
}

.container .magnifying-glass .magnify-fx {
  font-size: 10rem;
  color: transparent;
  -webkit-text-stroke: 2px green;
  cursor: default;
}

<div class="container">
  <h1 class="display">abc</h1>
  <div class="magnifying-glass">
    <h1 class="magnify-fx">abc</h1>
  </div>
</div>

Alter the color of the text when hovering over it, only in the area where the

Answer №1

Update

Similar questions

Is it secure to use console.time() in a Node.js environment?

What is the best way to highlight a specific city on a map by placing a circle around it?

The issue with the NextJS Layout component is that it is failing to display the page content, with an error message indicating that objects cannot be used

Sending numerous arguments via HTTP DELETE request

I am interested in gradually displaying and then hiding a collection of keywords from an array in a single instance

What is the best way to align two HTML elements in a single column?

Decrease one of the two values in Mongoose

Conceal a column within a nested HTML table

Scripts fail to load randomly due to RequireJs

Enhance your input text form with a stylish button using Bootstrap

What is the functionality of Mongoose for handling multiple updates?

placing additional containers at the bottom rather than on the right side

Tips for avoiding passing an empty string when using local storage

"Using jQuery to trigger a click function on elements with the same

Generate radio buttons in a model loop in Vue.js based on names automatically

CSS: The addition selection operator is not functioning as expected

How does one make sense of comparing integers with strings and arrays?

What are the implications of including jQuery on a page multiple times?

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

What is the best way to remove every other second and third element from an array?