Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled.

HTML

<div class="bot-text">
  <a href="">Visit this site</a>
  <a href="">Or check this out</a>
</div>

CSS

.bot-text a {
  font: 600 15px/20px 'Open Sans', sans-serif;
  color: #383737;
  position: relative;
  display: inline-block;
  border: 2px solid #383737;
  padding: 25px;
  margin: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

This code generates a text button with a border and padding. Upon hover, the text should switch to something else (always shorter). The new text should slide up from the bottom to replace the current link text on hover.

javascriptjqueryhtmlcss

Answer №1

Consider using the :after pseudo element for better styling options

.bot-text a  {
  font: 600 15px/20px 'Open Sans', sans-serif;
  color: #383737;
  position: relative;
  display: inline-block;
  border: 2px solid #383737;
  padding: 25px;
  margin: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.bot-text a:hover {
  color:transparent;
}

.bot-text a:hover:after {
  opacity:0;
  position:absolute;
  left:40%;
  color:blue !important;
  content:"abc";
  animation: slideup 1s ease-in 0s forwards;
  -moz-animation: slideup 1s ease-in 0s forwards;
  -webkit-animation: slideup 1s ease-in 0s forwards;
}

@keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-moz-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}

@-webkit-keyframes slideup {
  from {
    top:50px;
  }
  to {
    top:25px;
    opacity:1;
  }
}
<div class="bot-text">
  <a href="">Check this out</a>
  <a href="">Click here</a>
</div>

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

Customize the appearance of parent components based on the content of their child elements

I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when th ...

cssangularbootstrap-modalparent-child

The PHP script's header() function is failing to execute

Recently, I encountered an issue with my JavaScript code that calls a backend PHP script using AJAX. The main function of the AJAX request is to send user login data (username and password) to the PHP script, which in turn queries this information on the S ...

javascriptphpjqueryajax

Is there a way for me to retrieve the text response of a fetch request from client-side JavaScript to fastify server?

In my fastify node.js application, I am encountering an issue where I can see the text results of a promise right before it is returned to the browser's JavaScript code. However, once the promise is returned to the browser JS, all I get is an empty st ...

javascriptnode.jsfetchfastify

Why can't the keyboard access the close button in Autocomplete's Free Solo feature?

While exploring the Material UI Autocomplete Free Solo feature, I observed that the "Clear input" button can be clicked on but cannot be accessed via keyboard. https://i.stack.imgur.com/NdVD9.png In my quest to understand why this design choice was made, ...

htmlmaterial-uiaccessibilitytabindex

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

htmlcarouselbootstrap-5

Manipulating the 'display' attribute with jQuery

Is there a way to show an element that has been hidden using the following CSS? .pds-pd-link { display: none !important; } Can jQuery be used to enable the display of the .pds-pd-link CSS? For example, would $(.pds-pd-link).css("display",""); ...

jquerycss

What steps are involved in creating an xlsx file using Express and Exceljs, and then sending it to the client?

I am currently working on separating controllers and services in my Express app. One of the services I have generates an XLSX file using ExcelJS. I'm looking for a way to reuse this service without passing the response object to it. Is there a method ...

javascriptnode.jsexpressresponseexceljs

The React onChange event fails to trigger

Why isn't the onChange event firing in the input tag? I used LinkedStateMixin to track the input value before, but now I want to add an onChange event to run a function. After removing LinkedStateMixin, the onChange event still doesn't fire. I ev ...

javascriptreactjs-flux

Ways to assign an identification attribute to HTML elements within innerHTML

Utilizing Ajax in conjunction with php $("#test1").click( .... function(data){ document.getElementById("test2").innerHTML=data; } ) php will return the data echo "<input type='text' id='test'>"; Seeking adv ...

javascriptphpajax

Utilizing Jquery and JavaScript to filter out specific HTML objects retrieved from an AJAX response

I'm encountering a puzzling issue with this snippet of HTML: <div id="1"> <div class="text"> Text for div 2 </div> <img src="images/image1.jpg"></img> </div> <div id="2"> <div class="text"> ...

javascriptjqueryajaxfilter

Setting the content-type for static assets in NuxtJS

I'm trying to use the Nuxt built-in server to serve the static file /.well-known/apple-app-site-association with a content-type of application/json. Unfortunately, because the file does not have a .json extension, it is returning as application/octet- ...

javascriptnode.jsvue.jsnuxt.js

Is it possible to utilize the HTML5 browser storage on multiple domains simultaneously?

When considering options for HTML5 browser storage such as IndexedDB or Web Storage, it's important to note that the "same origin policy" applies based on what is stated in the specification. Is there a method to store data within the browser that ca ...

htmlstoragelocal-storagesame-origin-policy

What is the best way to deploy a Vue Webpack application using Sails.js?

I am currently managing a Sails.js server alongside a Vue Webpack application, running as separate entities. Here's how my folder structure is laid out: /application-root/server/ /application-root/client/ Within the /server/ directory lies my Sails ...

javascriptnode.jswebpackvue.jssails.js

Needing to utilize the provide() function individually for every service in RC4

In Beta, my bootstrapping code was running smoothly as shown below: bootstrap(App, [ provide(Http, { useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHt ...

javascriptangulartypescript

After the completion of an AJAX request, variables are not refreshed

On my webpage, I have a grid displaying various 'objects'. These objects can be edited by clicking on the 'Edit' option, which opens a modal window using ui.dialog. The modal window loads a template with inputs and textareas to edit the ...

jqueryajaxmodal-dialog

Can CSS Grid be substituted for Material UI's grid component?

Exploring the Material-UI Grid Component, I have found that it is built on flexbox and offers great functionality. However, my curiosity lies in comparing it to CSS Grid, which I find equally user-friendly. Despite my preference for CSS Grid, I am hesita ...

cssreactjsmaterial-uinext.jscss-grid

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...

cssangulartypescriptsassangular-material

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

The customization of jQuery UI Slider is failing to function as expected

In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...

jqueryhtmlcssjquery-uiuislider

Adding -moz & -o prefixes to code that only has -webkit tags can be done by manually duplicating each line of

Imagine having a webpage located at this link: After saving the page and running the HTML file on my localhost, everything seems to work smoothly in Chrome due to the presence of -webkit prefixes in the CSS. Now the question arises - how can I ensure that ...

cssvendor-prefix