What steps can I take to prevent divs from changing when hovered over individually?

Firstly, I am open to any superior suggestions that could save me some time and effort.

My goal is to create a vertically oriented circular/elliptical carousel. Despite my extensive searching on Google for days, I have not come across anything similar, which surprises me.

The idea is to have elements rotating in a circle pattern. Upon hovering over any element, the rotation of all elements would pause, while the hovered element undergoes an animation like expanding in size.

View this JSFiddle: https://jsfiddle.net/23x7t4dq/

I attempted using a combination of pausing transitions and transformations but none have proven effective.

.circle-container {
    margin: 0 auto;
    position: relative;
    width: 440px;
    height: 440px;
    background: transparent;
    -webkit-animation: rotation 6s linear 0s infinite normal none;
    -moz-animation: rotation 6s linear 0s infinite normal none;
    -ms-animation: rotation 6s linear 0s infinite normal none;
    -o-animation: rotation 6s linear 0s infinite normal none;
    animation: rotation 6s linear 0s infinite normal none;
}
.circle {
    position: absolute;
    top: 170px;
    left: 170px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.7;
}
.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.circle:nth-child(1) {
    -webkit-transform: rotate(0deg) translateX(150px);
    -moz-transform: rotate(0deg) translateX(150px);
    -ms-transform: rotate(0deg) translateX(150px);
    -o-transform: rotate(0deg) translateX(150px);
    transform: rotate(0deg) translateX(150px);
    background: #ff504f;
}
.circle:nth-child(2) {
    -webkit-transform: rotate(72deg) translateX(150px);
    -moz-transform: rotate(72deg) translateX(150px);
    -ms-transform: rotate(72deg) translateX(150px);
    -o-transform: rotate(72deg) translateX(150px);
    transform: rotate(72deg) translateX(150px);
    background: #ffe63d;
}
.circle:nth-child(3) {
    -webkit-transform: rotate(144deg) translateX(150px);
    -moz-transform: rotate(144deg) translateX(150px);
    -ms-transform: rotate(144deg) translateX(150px);
    -o-transform: rotate(144deg) translateX(150px);
    transform: rotate(144deg) translateX(150px);
    background: #50dc64;
}
.circle:nth-child(4) {
    -webkit-transform: rotate(216deg) translateX(150px);
    -moz-transform: rotate(216deg) translateX(150px);
    -ms-transform: rotate(216deg) translateX(150px);
    -o-transform: rotate(216deg) translateX(150px);
    transform: rotate(216deg) translateX(150px);
    background: #41c39d;
}
.circle:nth-child(5) {
    -webkit-transform: rotate(288deg) translateX(150px);
    -moz-transform: rotate(288deg) translateX(150px);
    -ms-transform: rotate(288deg) translateX(150px);
    -o-transform: rotate(288deg) translateX(150px);
    transform: rotate(288deg) translateX(150px);
    background: #4db5dc;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rotation {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

jqueryhtmlcsscarouselcss-transforms

Answer №1

Hover Effects with CSS and jQuery

.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

View Demo on JSFiddle

Custom Hover Effect for Circles using jQuery:

Since there is no selector for the parent element, a pure CSS solution is not feasible

JavaScript

$(".circle").mouseenter(function () {
    $(this).parent().addClass("paused");
});

$(".circle").mouseleave(function () {
    $(this).parent().removeClass("paused");
});

CSS

.circle-container.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

Check out the Interactive Demo on JSFiddle

Answer №2

To pause an animation, simply use animation-play-state: paused;.

If you want the :hover effect to only apply when hovering over a child element, set the width and height of the container to 0 and adjust the transform-origin property for proper rotation.

(Browser prefixes have been omitted for easier reading. This code has only been tested in Firefox)

.circle-container {
  margin: 0 auto;
  position: relative;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 50%;
  transform-origin: 220px 220px;
  left: -220px;
  animation: rotation 6s linear 0s infinite normal none;
}
.circle-container:hover {
  animation-play-state: paused;
}
.circle {
  position: absolute;
  top: 170px;
  left: 170px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.7;
  transition: transform .5s;
}
.circle:nth-child(1) {
  transform: rotate(0deg) translateX(150px);
  background: #ff504f;
}
.circle:nth-child(1):hover {
  transform: rotate(0deg) translateX(150px) scale(2);
}
.circle:nth-child(2) {
  transform: rotate(72deg) translateX(150px);
  background: #ffe63d;
}
.circle:nth-child(2):hover {
  transform: rotate(72deg) translateX(150px) scale(2);
}
.circle:nth-child(3) {
  transform: rotate(144deg) translateX(150px);
  background: #50dc64;
}
.circle:nth-child(3):hover {
  transform: rotate(144deg) translateX(150px) scale(2);
}
.circle:nth-child(4) {
  transform: rotate(216deg) translateX(150px);
  background: #41c39d;
}
.circle:nth-child(4):hover {
  transform: rotate(216deg) translateX(150px) scale(2);
}
.circle:nth-child(5) {
  transform: rotate(288deg) translateX(150px);
  background: #4db5dc;
}
.circle:nth-child(5):hover {
  transform: rotate(288deg) translateX(150px) scale(2);
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes rotation {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Answer №3

CSS does not have a parent selector, to pause an animation in CSS you can do the following:

-webkit-animation-play-state: paused | running;

To achieve this using Javascript or jQuery, you would need code like the example below:

$(".circle").hover(
  function(){
    $(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
    $(this).parent().css("-webkit-animation-play-state", "running");
});

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

Image link in HTML / CSS not functional on one half of the image

My webpage has an image thumbnail with accompanying text positioned to the right. I have a hyperlink on the image that should open the full-size version when clicked. However, there seems to be an issue where the hyper link only activates on the lower hal ...

htmlcss

Transfer an HTML file generated in real-time to an external server using SFTP

I am currently working on creating an HTML file dynamically using the file_put_contents function and the ssh2 library for SFTP. However, I am facing an issue where Apache is reporting that the file cannot be sent because it does not exist on the local dis ...

phphtmlftpsftp

Button click does not fill in Jquery Datepicker?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link > <script type="text/javascript" src= ...

javascriptjqueryasp.netdatepicker

Utilize the wkhtmltox C library to transform an HTML string into a PDF file

I have been experimenting with converting html strings to PDF using the wkhtmltopdf C library. After reviewing the sample provided with the installer, I was able to successfully compile and convert the page. Below is the code snippet I used as a reference. ...

htmlc++cpdfwkhtmltopdf

Embedding complex JSON information into an HTML dropdown menu

Here is a JSON string that I am working with: { "electronics": { "cameras": [ "sony", "nikon", "canon" ], "TV": "none", "laptop": [ "hp", "apple", "sony" ] }, "home": { "furniture": [ ...

htmljsonangularjstwitter-bootstrap

Using Ajax with Controller Action in Yii2

As a newcomer to programming, I am facing an issue where I need to call a function when the user inputs data and clicks the submit button. Although I am working with Yii2, I lack experience in Ajax. Despite my efforts, the controller action is not being tr ...

javascriptphpjqueryajaxyii2

Select a date from the JQuery calendar, verify it against the database, and display any events scheduled for that date

I am working with a jQuery calendar that stores the selected date in a variable named "X". My goal is to retrieve events stored on that specific date from the Database and display them. Can anyone provide some guidance? <div id="calendar"></div&g ...

javascriptphpjqueryajax

Error handling ajax and php in the submitHandler of $.validate

I encountered an issue with my double form utilizing jQuery Validate. Whenever the ajax call is supposed to execute, I receive an error message: $.validate.submitHandrer in main.js. Here is a snippet of my code: 'use strict'; // Code goes here ...

jqueryajaxjquery-validate

Tips for changing the size of a background image using JavaScript on the fly

I am a beginner in the world of programming and currently working on my very first mini-project - a word definition game. One of the challenges I am facing is related to an event listener on an input field, where I aim to change the background image every ...

javascripthtmlcss

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

Uploading files with jQuery AJAX across different domains

What I'm facing is an issue with uploading files to a subdomain that serves as an API endpoint for file uploads. Every time I try to upload a file using jQuery from the main www domain to this subdomain, I encounter an error. XMLHttpRequest cannot ...

jqueryajaxnginxcross-domain

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

Sequential jQuery AJAX requests triggering in an incorrect sequence

One challenge I am facing involves a select list with bundles of short texts. Upon selecting a specific bundle, the texts are displayed in two tables. Each table row has a "Delete" icon to remove a text from the bundle. I am aiming to refresh both the tabl ...

javascriptjqueryajaxpromisechained

How come I am able to successfully send a Post request through Postman, but encountering issues when trying to do the same

I am facing an issue with my NodeJs/Express Webservice. When I send a POST request to the webservice using Postman, it works fine. However, when I try to send a POST request using JavaScript, I encounter the error {message: "Cannot read property 'path ...

jquerynode.jsexpresspostpostman

How can I make col-8 and col-4 display next to each other?

Here is the code snippet I recently submitted: <section class="main-container"> <div class="grid-row no-gutters"> <div class="column-8"> <img class="full-width-img& ...

htmlcssbootstrap-4

What is the best way to extract text using Selenium in Java?

My goal is to extract the text $1.00 from the HTML code snippet below (I already have the xpath, so no need to worry about that). Let's assume the xpath is //*[@id="price-string"] <strong id="price-string">$1.00</strong> ...

javahtmlselenium

Verifying the Page Load Status in the Browser

I've been spending a lot of time lately trying to find code that will allow me to trigger an action after the browser finishes loading a page. After much searching, I finally came across this piece of code on <script> var everythingLoaded = s ...

javascriptjquery

Adjust the margins of an image within a text box

I've come across a simple yet widely used code online. I tried placing an image inside a textbox with the type of "text", but the image is touching the border of the empty box. Is there a way I can adjust the positioning of the image to the right to p ...

htmlcssimagetextbox

Find the preceding element of the element that includes a specific link text

Can someone help me figure out how to click on a <td> element that precedes the <td> element with the linkText "Main" using Selenium? The element I'm looking to click is shown in the highlighted area of this image: https://i.sstatic.net/Q ...

javahtmlcssseleniumxpath

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

javascripthtmlnode.jsejs