Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic.

This is how my css/html is currently structured:

.links {
  display: block;
}

.links a {
  color: #000000;
  text-decoration: none;
  display: inline;
  width: 150px;
  box-shadow: inset 0 0 0 0 #000;
  overflow: visible;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.links a:hover {
  display: inline-block;
  transform: rotate(20deg);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: inset 0 50px 0 0 #ea1a00;
}
<div class="links">
  <a href="example.com">
    <span>Link example</span>
  </a>
</div>

(Adapted from teaclub.crd.co)
I wanted to achieve a specific effect where only the red highlight (not the text) rotates when the link is hovered over.

I attempted using the transform: rotate function but found that it always affected the text as well. Is there a way to separate them?

Thank you for your help!

javascripthtmlcss

Answer №1

Here is a suggestion for you:

.links {
  display: block;
  width: 100px;
}

.links a {
  color: #000000;
  text-decoration: none;
  display: inline;
  width: 150px;
  box-shadow: inset 0 0 0 0 #000;
  overflow: visible;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.links a:hover .rotate {
  opacity: 1;
  transform: rotate(45deg);
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.rotate {
  opacity: 0;
  position: absolute;
  background: red;
  width: 100px;
  height: 20px;
  top: 8px;
  left: 6px;
  z-index: -2;
}
<div class="links">
  <a href="example.com"><span style="font-family: 'Arsenal', sans-serif;">Link example</span>
        <span class="rotate"></span></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

Position a flash element adjacent to an input field

I'm struggling to properly align two elements together. Below is the HTML code: <input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' /> <span> <object classid="clsid:d27cdb6e-ae6-11c ...

htmlcss

What methods can be used to modify element attributes in Python?

I'm curious about how to utilize Python to modify an element in the HTML code of a webpage: In this case, I need to change it from: <input _ngcontent-mcp-c552="" type="number" name="bpm" placeholder="0" min= ...

pythonhtmlselenium

What is the best way to trigger a mongoose post hook from a separate JavaScript file or function?

I've been working with a location.model.js file that looks like this: 'use strict'; var mongoose = require('mongoose'), Schema = mongoose.Schema; var LocationsSchema = new Schema({ name: String, description: String, country_i ...

javascriptnode.jsexpressmongoosemean-stack

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

javascripthtmlgoogle-mapsjsfiddle

Displaying information on a chartJS by connecting to an API using axios in VueJS

Struggling with inputting data into a ChartJS line-chart instance. The chart only displays one point with the right data but an incorrect label (named 'label'): Check out the plot image The odd thing is, the extracted arrays appear to be accura ...

javascriptvue.jschart.js

trigger the focusout event within the focusin event

I am attempting to trigger the focusout event within the focusin event because I need to access the previous value from the focusin event, but the focusout event is being triggered multiple times. $('tr #edituser').focusin(function(){ var ...

javascriptjquery

Oops! There was an issue while trying to serialize the props returned from getServerSideProps in "..." - we apologize for the inconvenience

Attempting to add a condition within getServerSideProps: export async function getServerSideProps(context) { const jwt = parseCookies(context).jwt || null; if (jwt) { const user = parseJwt(jwt); const userId = user.id; console.log(userId); ...

javascriptreactjsnext.js

What is the best way to manage a multi-select dropdown with checkboxes in Selenium Webdriver?

Below is a snapshot of the drop-down I am working with. In order to handle multiple selections, I currently have code that clicks on the arrow in the drop-down and then selects the corresponding checkbox. However, I would like a more efficient solution fo ...

javajavascriptjqueryseleniumselenium-webdriver

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...

javascripthtmlvideohtml5-video

Close the parent electron window while keeping the child window open

I am currently working on a project where I need to create an electron app that displays a splash screen initially and then opens a new window before closing the splash screen. However, despite my efforts, I am facing challenges in achieving this functio ...

javascriptnode.jselectron

Validation of multiple textboxes can be achieved by utilizing either JavaScript or Angular 1

How can I implement a validation in Angular 1 or JavaScript that will enable the submit button only when there is text in any of the 3 textboxes? If no text is present, the button should be disabled. Below is the code snippet: First name: <br> < ...

javascripthtmlangularjs

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

JQuery submitting a partial view form displays an empty page along with a JSON response

I am working on an Edit function in MVC4 public ActionResult Edit(UserGroup usergroup) { usergroup.created_date = DateTime.Now; usergroup.modified_date = DateTime.Now; db.Entry(usergroup).State = EntityState.Mod ...

javascriptjqueryhtmlasp.net-mvc-4

Switching video sources with jQuery and HTML5 can be achieved by clicking on an

I need to develop an engaging video using HTML5 and jQuery. My objective is to: Start playing video1 Show button1 when video1 finishes, then switch to video2 upon clicking and hide button1 Play video2 Display button 2 after video2 ends, then change to vi ...

javascriptjqueryvideohtml5-video

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

javascriptreactjstypescriptreact-hooks

Discover the secret to loading multiple Google charts simultaneously, despite the limitation that Google charts typically only allow one package to load at a time

I currently have a pie chart displaying smoothly on my webpage, but now I am looking to add a treemap as well. The code snippet for the treemap includes the package {'packages':['treemap']}. It has been stated that only one call should ...

javascriptajaxjspchartsgoogle-visualization

steps to verify the status of a sent request

I am utilizing the contenteditable property in a p tag. My code is as follows: <p contenteditable="true" id="Option1_<?php echo $i ?>" style="width:98%;border:4px thin black; background-color:#D6D6D6;font-size:18px;color:black;padding:3px ">&l ...

javascriptphpjquerymysqlajax

Hiding divs toggle off when either all or only one is selected

In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then se ...

javascriptjqueryhtmlcss

CSS code completion in PhpStorm is not functioning properly for Twig extended templates

Currently, I am working with PhpStorm 2016.1 and facing an issue with file autocomplete. The scenario is as follows: @mycss .style {color : red} @base.html.twig [...] <link rel="stylesheet" href="/vendor/mycss.css" /> <!--HERE AUTOCOMPLETE OF s ...

cssautocompletestylestwigphpstorm

Using Vuejs to display errors with alerts

Is there a way to display errors using alerts in bootstrap when working with vuejs? This is an example of the code: <div v-if="this.getError"> <div v-for="(_errors, key) in this.getError"> <p>{{key.repla ...

javascriptvue.jsvuejs2frontend