Adjust the text color to complement the shifting background shade

I'm looking to customize the hover color of my links to match the constantly changing background. You can view my progress on this in the JSFiddle linked below: https://jsfiddle.net/Lcz7gk72/

Essentially, I want the "[email protected]" text to blend with the body background when hovered over.

Any assistance would be greatly appreciated. While I prefer to stick to just JavaScript, if absolutely necessary, jQuery could be considered.

body {
    font: 20px monospace;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    animation: pulse 60s infinite normal;
    -webkit-animation: pulse 60s infinite normal;
    -moz-animation: pulse 60s infinite normal;
    -o-animation: pulse 60s infinite normal;
}
a {
    color: #fff;
    border-bottom: 1px dotted #fff;
    text-decoration: none;
}
a:hover {
    border-bottom: 1px solid #fff;
    position: relative;
}
a:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0;
    height: 20px;
    background-color: #fff;
    content: "";
    transition: width 0.4s;
}
a:hover {
    color: #fff;
}
a:hover:after {
    width: 100%;
}

@keyframes pulse {
    0% { background-color: #f00; }
    25% { background-color: #0f0; }
    50% { background-color: #00f; }
    75% { background-color: #00a; }
    100% { background-color: #0a0; }
}
@-webkit-keyframes pulse {
    0% { background-color: #f00; }
    25% { background-color: #0f0; }
    50% { background-color: #00f; }
    75% { background-color: #00a; }
    100% { background-color: #0a0; }
}
@-moz-keyframes pulse {
    0% { background-color: #f00; }
    25% { background-color: #0f0; }
    50% { background-color: #00f; }
    75% { background-color: #00a; }
    100% { background-color: #0a0; }
}
@-o-keyframes pulse {
    0% { background-color: #f00; }
    25% { background-color: #0f0; }
    50% { background-color: #00f; }
    75% { background-color: #00a; }
    100% { background-color: #0a0; }
}
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c68796f685c68796f68327f7371">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f0e1f7f0c4f0e1f7f0aae7ebe9">[email protected]</a></a>

javascripthtmlcss

Answer №1

My recommendation is to create a new animation that will change the color of the text when hovering over the <a> element. Additionally, you can modify or add rules for a::after (or a:after) to enhance the effect.

The CSS code below includes the necessary changes and explanations:

body {
  font: 20px monospace;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  animation: pulse 60s infinite normal;
  -webkit-animation: pulse 60s infinite normal;
  -moz-animation: pulse 60s infinite normal;
  -o-animation: pulse 60s infinite normal;
}
a {
  color: #fff;
  border-bottom: 1px dotted #fff;
  text-decoration: none;

  /* Added rule to prevent jumping on un-hover */
  position: relative;
}
a:hover {
  border-bottom: 1px solid #fff;
}
a:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 20px;
  background-color: #fff;

  /* Transition slowed down for better visibility */
  transition: width 3s;

  /* Get text from custom data-attribute */
  content: attr(data-text);

  /* Hide pseudo-element's text when not hovered */
  overflow: hidden;

  /* Linking to the animation */
  -webkit-animation: textPulse 60s infinite normal;
  -moz-animation: textPulse 60s infinite normal;
  -o-animation: textPulse 60s infinite normal;
  animation: textPulse 60s infinite normal;
  border-bottom: 1px solid transparent;
}
a:hover:after {
  width: 100%;
}
@keyframes pulse {
  /* Keyframe animations */
}

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0f1e080f3b0f1e0805cafcfefc">[email protected]</a>" data-text="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bdacbabd89bdacbabde7aaa6a4">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ecfdebecd8ecfdebecb6fbf7f5">[email protected]</a></a>

Check out this JS Fiddle demo for testing and development purposes.

If you prefer to avoid JavaScript despite needing the data-text attribute filled, I have another code snippet utilizing JavaScript to handle this task effectively:

// Function to fill 'data-text' attribute
(function() {
  var elems = document.querySelectorAll('.showBodyBackgroundColoredTextOnHover');
  Array.prototype.forEach.call(elems, function(el) {
    el.dataset.text = el.textContent.trim();
  });
})();


(function() {
  // Code logic here
})();

body {
  font: 20px monospace;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  animation: pulse 60s infinite normal;
  -webkit-animation: pulse 60s infinite normal;
  -moz-animation: pulse 60s infinite normal;
  -o-animation: pulse 60s infinite normal;
}
/* Additional CSS rules */

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="651100161125110016114b060a08">[email protected]</a>" class="showBodyBackgroundColoredTextOnHover"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f286978186b286978186dc919d9f">[email protected]</a></a>

Feel free to try out this JS Fiddle demo for further experimentation and enhancement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using AJAX to submit data and displaying the results in either an input field or a div

Having a PHP script to track button clicks to a text file <?php if (isset($_POST['clicks1'])) { incrementClickCount1(); } function getClickCount1() { return (int) file_get_contents("count_files/clickcount1.txt"); } function increme ...

phpjqueryhtmlajax

Is it possible to convert PDF documents to HTML using languages such as C, C++, or Java?

My current project involves annotating HTML files using Javascript, and I need to convert PDF files into HTML files specifically for the IOS platform. While I have had some success in annotating HTML pages, I am unsure how to go about converting PDF to H ...

javac++htmlpdf

Implementing a user registration popup form with AJAX in Yii framework

I am currently utilizing the Yii-user extension for user registration, and it is working perfectly fine. However, my requirement is to display the registration form using ajax on pages that have a menu item for registration. I do not want the user to be re ...

javascriptjqueryajaxyiiyii-extensions

Omit the element from the event listener

Is there a way to prevent the image from triggering a click event in this code snippet? $('#templtable .trhover *:not(#infoimg)').live('click', function(event) { event.stopPropagation(); $(this).toggleClass('selected&a ...

jquerycss

Switching the image by clicking on the link

Looking for assistance with a code that displays three button images and fades in the relevant div when clicked using jQuery... http://jsfiddle.net/ttj9J/11/ HTML <a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE ...

jqueryhtmlcss

Trouble with the x-cloak attribute in alpine.js

Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...

javascripthtmlcsstailwind-cssalpine.js

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

javajavascriptcssmavenjakarta-ee

How to retrieve an element in jQuery without using the onclick event listener

I'm looking to extract the element id or data attribute of an HTML input element without using the onclick event handler. Here is the code I currently have: <button class="button primary" type="button" onclick="add_poll_answers(30)">Submit</ ...

javascriptjqueryhtmlajaxonclick

Issue with jQuery selector not updating when variable changes

'I am attempting to create a functionality where a function is triggered upon clicking the "hit" class, but only when the correct parent "box" id is selected. var currentSelection = 1; $('#box-' + currentSelection + ' .hit'). ...

javascriptjquery

What is the process of displaying JSON headers using JavaScript?

Although it may seem like a simple question, I am new to JSON. Can someone explain how to display a heading in the console? This is the code I have: var jsonstr = '{"profile":{"name" : "raj","age":"35&qu ...

javascriptnode.jsarraysjsonprinting

Despite awaiting them, promises are not resolving synchronously

I have a function that retrieves location information and returns a promise. I use mobx to manage the store, updating the this.locationStoreProp and this.hotel.subtext properties. public fetchPropertyLocation(some_input_params): Promise<any> { ...

javascriptecmascript-6promisemobxmobx-react

Leveraging Next.js 'useClient' in conjunction with server component (global)

Hello there! I'm trying to achieve a 50% opacity effect on my Gallery when the search bar is in use. However, I'm facing challenges using 'use client' with the glob library. Here's the code snippet: app/page.tsx "use client&qu ...

javascriptreactjsnext.jsglob

Do additional MySql tables have an impact on the speed of searches within a MySql database?

I am in the process of considering a database redesign for my classifieds website. Currently, I have 7 different tables in the database, each corresponding to a "MAIN CATEGORY". For instance, there is a "VEHICLES" table that contains information on variou ...

phpsqlmysqlhtmldatabase

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

What do you understand by the term "cyclic data structures"?

According to the information found on the JSON site, it states: JSON does not allow for cyclic data structures, hence one must avoid passing cyclical structures to the JSON stringify function. I am curious about what this means. Could someone provide a ...

javascriptjsondata-structures

Scrolling left and right, text floats atop the image

Trying to implement a rollover effect image using CSS. The initial state shows only the title, but upon hovering, a text overlay appears. Everything seems to be working well except that the text area extends off to the right. Also, there is scrolling up an ...

htmlcssimagetextrollover

I can't seem to figure out why I keep running into a 403 error and why my Delete API isn't functioning

Need Assistance as a Beginner Working on a MERN Project and struggling with making the Delete API function from the front-end. The Delete API works perfectly when tested through Postman, but fails to work from the front-end. Below is the code snippet of t ...

javascriptreactjsreact-reduxmern

I'm striving to organize my code by moving my logic into a separate file through the use of module.exports and require, but I'm finding it challenging to grasp

Lately, I've delved into the world of Node.js + Express.js with the aim of combining them with Socket.io to create a real-time chat application. However, my lack of experience with Node.js and Express.js is proving to be a challenge as I struggle to o ...

javascriptnode.jsexpress

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

I have a set of items like this: I am trying to replicate the functionality of a file explorer in terms of item selection. To clarify, I aim to create a feature where hovering over an item and left-clicking it would generate a virtual rectangle to select ...

javascriptjquerycss

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml