Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element:

 .dash_border{
        border: dashed;
        stroke: 2px;
        margin:20px;
    }

My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving when I move the pointer away. How can I achieve this effect?

Answer №1

div {
    background: white;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

div:hover {
     -webkit-animation: rotate 2s linear infinite;
     border: 2px dashed blue;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}
   <div class="rotate"></div>

This code snippet creates a circular shape with a dotted border in CSS and adds an animation effect on hover. The inspiration for this came from the answer provided in this Stack Overflow thread.

You can view and interact with a live demo of this code on JSFiddle.

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

Error with JSON parsing in JavaScript when processing large numbers

After requesting a list of approved tweets from a webserver in JSON format, I visited the URL: http://localhost:8000/showtweets/?after_id=354210796420608003 and received the following JSON response: [{ "date": "2013-07-08T12:10:09", "text": "#R ...

What criteria does Angular use to determine when the aot compiler should be utilized?

This page discusses the concept of modules in Angular and explains the two approaches to bootstrapping - dynamic and static. The configuration for these approaches is typically found in main.ts: // Using the browser platform with a compiler import { platf ...

Exploring the differences between UTC and non-UTC date formats in Javascript

When working with JavaScript, I encountered a challenge in comparing two dates that are formatted differently. Specifically: 2015-09-30T00:00:00 and 9/30/2015 12:00:00 AM The former is in UTC format while the latter is not. Despite referring to the same ...

Encountering an issue with displaying Firestore timestamps while utilizing onSnapshot() in React Native results in an error

Currently, I'm in the process of developing a chat application using Firestore. The approach involves utilizing Flatlist and querying with onSnapshot() to provide real-time updates for both sender and receiver. Here's an example of my query: con ...

After exporting static HTML, the links in Next.JS seem to become unresponsive

Exploring the world of NEXT.JS for the first time and encountering challenges with deploying a static site. In my component Nav.tsx, I have the following structure: const Nav = () => { return ( <nav className='nav p-3 border-bottom&a ...

The React Stripe API is functioning perfectly on local servers but encountering issues in the live environment

Just when I thought I was almost finished, reality hits me hard! My deadline is right around the corner! I finally got everything working on my local machine with a stripe payment form. However, when I pushed it live, I received an error message from my A ...

Generating a stacked array using JavaScript

I have an original two-dimensional array representing the full budget for each year, as shown below: budget = [['2001-01-01', 100], ['2001-01-02', 110], ... , ['2001-12-31', 140]] Now I want to create subarrays of the budget ...

The position of the camera remains static even after it is attached to a mesh

Looking to implement a TPS (third-person shooter) camera that follows the player? I have added the camera to a cube which represents the player's movement. You can view the coordinates of both the camera and cube in this example. While the camera is f ...

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

What is the best way to convert template interpolation using different words into a correct expression syntax in JavaScript regex?

I have a string that contains template interpolation along with words that are not inside the interpolation. The string can be in one of these various forms: foo{{bar}} {{foo}}bar foo{{bar}}baz {{foo}}{{bar}} foo {{foo}} {{foo}}bar{{baz}} The text interpo ...

Calculate the total sum by adding the values of the radio buttons that have been selected and then display or

Seeking help to troubleshoot my code! I want to calculate the sum of selected radio button values and display it at the end. Can anyone assist me with this issue? Thanks in advance! <html> <head> </head> <script type="text/javas ...

Traversing an array of objects using D3.js

I'm attempting to create a row of bars that are all the same height and width based on their titles. I have an array of 100 objects, each with a key called results containing another array of 20 objects. This means I should end up with a row of 2000 b ...

Mastering the art of column stacking with CSS on your WordPress website

Looking for a CSS solution to adjust the layout when the screen resolution is lowered. Currently, I have two rows with three columns in each row, containing blurbs. My goal is to make these two rows convert into three rows with two columns each at a cert ...

Absence of event firing in .on method in Asp.NET Core 6 when using JQuery

I am currently working on an ASP.NET Core 6 application that utilizes JQuery. Here is the JQuery code snippet I have implemented in my page: @section Scripts { @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } ...

Tips for managing modal states in functional React components in React Native using React hooks

Utilizing React hooks to manage modal opening and closing, I encountered an issue with my code. The function 'handleAddClick' is supposed to open the modal when used on TouchableOpacity, while the function 'handleClose' should close the ...

Toggling between different divisions independently

I'm trying to create a navigation bar similar to Twitter. I want one specific div within the bar to scroll with notifications or news, while keeping the rest of the bar content unchanged. Any ideas on how to achieve this? Check out my code here. #nav ...

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

Tips for Disabling ML5 Posenet

Looking to halt Posenet after completing app task private sketch(p: any) { p.setup = () => { this.poseNet = ml5.poseNet(p.createCapture(p.VIDEO), { outputStride: 8 }); this.poseNet.on(&apos ...

I'm looking for guidance on how to merge my JavaScript and CSS files together. Can anyone provide me

As a beginner in web development, I have been looking into combining JS and CSS files. However, explanations using terms like minifies and compilers on platforms like Github and Google are still confusing to me. Here are the CSS files I have: bootstrap ...

Tips for incorporating an onClick event into a variable beyond the class extension

Currently utilizing React/Redux in this scenario. At the beginning of my code, outside of the class extends block, I have: const Question10 = () => (<div> <p>Insert question here</p> <input place ...