Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS.

body{
    font-family: Arial, Helvetica, sans-serif;
}
.item{
    width: 30px;
}
a{
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label{
  content: 'ADD';
}
<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>

You can view my progress on JSFiddle.

htmlcss

Answer №1

Utilize the CSS property called content in combination with the ::after and ::before pseudo-elements for this purpose.

.item:hover a p.new-label:after{
 content: 'ADD';
}

For example:

body{
 font-family: Arial, Helvetica, sans-serif;
}
.item{
 width: 30px;
}
a{
 text-decoration:none;
}
.label {
 padding: 1px 3px 2px;
 font-size: 9.75px;
 font-weight: bold;
 color: #ffffff;
 text-transform: uppercase;
 white-space: nowrap;
 background-color: #bfbfbf;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 text-decoration: none;
}
.label.success {
 background-color: #46a546;
}

.item a p.new-label span{
 position: relative;
 content: 'NEW'
}
.item:hover a p.new-label span{
 display: none;
}
.item:hover a p.new-label:after{
 content: 'ADD';
}
<div class="item">
 <a href="">
 <p class="label success new-label"><span class="align">New</span></p>
 </a>
</div>

Take a look at the original JSFiddle Demo

Answer №2

Check out this cool example found on the Mozilla Developers website:

::after

You can even create tooltips with this technique! :) Instead of hardcoding text in your CSS, try using content: attr(data-descr);, and store the text in the data-descr="ADD" attribute of your HTML tag (which allows for easy translation)

CSS content is specifically for use with :after and :before pseudo-elements. Here's an example to get you started:

.item a p.new-label span:after{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span:after {
  content: 'ADD';
}

The CSS :after pseudo-element acts as the virtual last child of the selected element. It's commonly used to add decorative elements to an element using the content CSS property. By default, it behaves as an inline element.

Answer №3

.tag:after{
    content:'CLICK';
}
.tag:hover:after{
    content:'EXPLORE';
}
<div class="tag"></div>

Answer №4

If you're looking to avoid using :before or :after pseudo elements for changing text on hover, there's a simple workaround. You can include both texts in the HTML but control their visibility using the CSS 'display' property based on hover. For example, if the second text 'Add' has a class named 'add-label', you can make the following modification:

span.add-label{
 display:none;
}
.item:hover span.align{
 display:none;
}
.item:hover span.add-label{
 display:block;
}

You can see a live demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ

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

The Webix component is experiencing a lack of refreshment

function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...

javascripthtmlajaxwebix

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

What is the best way to eliminate HTML <li> bullets using codebehind?

When working in codebehind, I often create an HTML list using the following method: HtmlGenericControl list = new HtmlGenericControl("ul"); for (int i = 0; i < 10; i++) { HtmlGenericControl listItem = new HtmlGenericControl("li"); Label textLabel ...

javascriptcsshtml-listscode-behind

Utilize Angular Material to assign the value of a mat-select component based on the FormControlName property

I am using Angular version 7 and have encountered an issue with a form I am creating. The form includes a dropdown select to choose an option, but when the page loads, the pre-defined value is not showing up. This page is specifically designed for editing ...

htmlangularangular-material

Emphasize specific lines within a textarea

I am facing a challenge with a textarea dedicated to validating telephone numbers. My goal is to highlight the lines that contain invalid telephone numbers by adding two asterisks in front of them. However, I'm struggling to figure out how to highlig ...

javascriptjqueryhtml

Are the elements in Chrome overlapping due to the box model?

I'm currently experiencing a problem of cross-browser compatibility between Chrome and Firefox. Upon inspecting the webpage in Chrome, it's evident that the box for the #content DIV is overlapping with the box for the H3. When viewed in Firefox ...

css-floatcross-browsercss

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

javascriptcsshtmlthree.js

PrimeNG - Sticky header feature malfunctioning in the p-table

Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...

htmlcssangularprimeng

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

htmlangularfullpage.js

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

What could be the reason my code isn't successfully performing addition within the input field?

As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...

javascripthtml

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

javascripthtmljqueryajax

Angular 2: The *ngFor directive is unable to locate a suitable differing framework

Below is the code for client.service.ts clients: Client[]; getClientList() { let headers = new Headers(); headers.append('Content-Type', 'application/json'); let authToken = localStorage.getItem('auth_token&apo ...

htmlangulartypescript

Setting distinct fonts for input placeholder and value: A guide

Can different fonts be set for an input placeholder and value? I have a scenario where the input placeholder is in a right-to-left language while the value is in English. Is it achievable using CSS3? ...

htmlcssplaceholderhtml-input

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

Interact with users on a website by using PHP to process form data

Here is the code snippet I am struggling with: <form action="profiles.php" method="POST" name="SearchSimple" id="SearchSimple" > <input name="search" id="s" style="width: 150px;" type="text"> <a style="display: inline-block; widt ...

phphtmlforms

How to create list item bullets with a star icon using reactstrap/react?

As a machine learning professional looking to enhance my frontend skills, I am curious about how to create list item bullets using a custom star bullet image. Could anyone please share a complete HTML/CSS example with me? Thank you in advance! ...

htmlcssreactjsfrontendreactstrap

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...

javascripthtmljquerycssowl-carousel

Creating a see-through effect for dijit.Dialog as it appears

Utilizing the dijit.Dialog library, I have implemented a Dojo Dialog box that appears on a Rowclick event of a Dojo grid. I am looking to make the Dialog box transparent or reduce its opacity so that the background is visible and it looks visually appealin ...

htmlcssdojo