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

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

javascriptjquerycss

Implementing optimistic updates with React-query mutations

Hello everyone! I'm a newcomer to react-query and I've been experimenting with making an optimistic update using the mutation function. However, I've encountered a problem where I'm unable to retrieve the previous value from the query. ...

javascriptreactjsreact-hooksreact-query

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

jQuery ceases to function once AJAX content is loaded

Exploring Options for Flexible Data Display I'm currently in the process of building a webpage that allows users to choose between different layouts for loading data. This includes the option to display data in either a list format or a card interfac ...

javascriptphpjqueryajaxreload

The router is displaying the component directly on the current page rather than opening it on a separate page

The issue is that the router is rendering the page on the same page instead of generating a new one. When clicking on the Polls link, it only renders the page there but the URL changes in the browser. Polls.js import React from 'react'; import ...

javascriptreactjsreact-router

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

Is there a way to refresh the index data with ajax jQuery?

I'm working with an array of data retrieved via the Ajax GET method. Currently, I am displaying this data using its index number such as data[0]. To access the next set of data, I click on a button that should update the index from "here 0" to fetch d ...

jqueryajax

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

htmlcssnext.jsserver-side-renderingcritical-css

I'm looking for a way to implement an interactive auto slideshow in JavaScript that allows users to manually

Having spent a lot of time studying auto slideshows, I'm facing an issue where clicking on the bullet to show the next image results in the image disappearing suddenly. Initially, I thought the problem was with using addEventListener events, so I swi ...

javascripthtmlcss

Managing the sequence of QUnit tests

I have created a website using jQuery and made numerous ajax requests in JSON format. I am interested in performing unit tests to validate the server side requests. Since I used jQuery, I chose qUnit for testing, but I'm facing an issue with the order ...

jqueryajaxunit-testingqunit

When searching for live Ajax in PHP CI, the result is not being displayed on the

I'm puzzled as to why, when I enter names in the input field in this code, no results are displayed. Additionally, I'm getting a Json parser error in my console: SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data ...

javascriptphpajaxjsoncodeigniter

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

One of the challenges I'm facing is with a dropdown component that is used multiple times on a single page. Each dropdown contains various options, allowing users to select more than one option at a time. The issue arises when the page refreshes afte ...

javascripttypescriptvue.jsvuejs2vuejs3

Adjust the size of a div using absolute positioning

Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...

csscss-grid

In the middleware, the request body is empty, but in the controller, it contains content

Below is my server.js file: import express from "express"; import mongoose from "mongoose"; import productRouter from "./routers/productRouter.js"; import dotenv from "dotenv"; dotenv.config(); const app = expres ...

javascriptnode.jsexpressrequestmiddleware

Node.js: Capturing requests and responses for console logging

I'm currently working on a Hapi server using Good to log all requests and responses to the console. I've been able to successfully log responses but I'm facing issues with logging the body of the response, and for requests, I'm not gett ...

javascriptnode.jslogginghapi.js

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

cssreactjsmaterial-uimui-x-data-grid

Refreshing CommonJS modules by reloading or reinitializing them

It is well known that CommonJS modules are designed to load only once. Imagine we have a Single Page application with hash-based navigation; when we go back to a page that has already been loaded, the code does not run again because it has already been loa ...

javascriptnode.jsrequirejssingle-page-applicationamd

Deactivate weekends when checkbox is marked and reactivate them when unchecked

Hello everyone! I've been experimenting with the code below in an attempt to enable/disable weekends on a datepicker, but it's not working as expected. What I'm aiming for is to disable weekends when a checkbox is checked and enable them whe ...

jqueryasp.net

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

cssresponsive-designmedia-queries

Node error connecting to Mongo database

Having trouble connecting my node server to MongoDB, here is the code snippet I am using: var http = require("http"); var url = require("url"); var Router = require('node-simple-router'); var router = Router(); var qs = require('querystring ...

javascriptnode.jsmongodbmongoose