My wish is for the animation to activate when hovering over an "a" element on the progress bar

Below is the HTML and CSS code:

.collection-by-brand {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-around;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #ffffff, whitesmoke);
  margin-bottom: 0px;
  text-align: center;
  padding: 70px;
}

.collection-by-brand img {
  box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 1);
  margin: 15px;
  border-radius: 20px;
}

.collection-by-brand-text h1 {
  margin-top: 100px;
  left: 50%;
  text-align: center;
  color: rgb(255, 0, 68);
  font-size: 40px;
  font-style: italic;
}

.collection-by-brand h3 {
  margin-top: 20px;
  font-size: 20px;
  font-family: 'Pacifico', 'cursive';
  color: rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.apple:hover h3,
.motorola:hover h3,
.lg:hover h3,
.samsung:hover h3,
.huawei:hover h3 {
  cursor: pointer;
  color: rgb(255, 0, 68);
  transition: 1s;
}

a:hover {
  text-decoration: none;
}

.icons a {
  margin: 10px;
}

.progress-bar {
  animation: pr 5s infinite;
  background-color: red;
}

@keyframes pr {
  0% {
    width: 0;
    color: red;
  }
  10% {
    background-color: blue;
  }
  20% {
    background-color: black;
  }
  30% {
    background-color: yellow;
  }
  40% {
    background-color: tomato;
  }
  50% {
    width: 100%;
    background-color: violet;
  }
  60% {
    background-color: rgb(184, 145, 145);
  }
  70% {
    background-color: white;
  }
  80% {
    background-color: rgb(0, 255, 234);
  }
  100% {
    width: 0;
    background-color: red;
  }
}
<div class="collection-by-brand-text">
  <h1>Collection by Brand</h1>
</div>
<div style="margin-top: 50px" data-aos="fade-in" class="collection-by-brand">
  <div class="samsung">
    <a href="samsung.html">
      <div class="brand-image">
        <img src="images/samsung.png" height="232px" width="115px" alt="">
      </div>
      <h3>Samsung</h3>
    </a>

  </div>
  <div class="apple">
    <a href="apple.html">
      <div class="brand-image">
        <img src="images/apple.png" height="232px" width="115px" alt="">
      </div>
      <H3>Apple</H3>
    </a>

  </div>
  <div class="lg">
    <a href="lg.html">
      <div class="brand-image">
        <img src="images/LG.png" height="232px" width="115px" alt="">
      </div>
      <h3>LG</h3>
    </a>

  </div>
  <div class="motorola">
    <a href="motorola.html">
      <div class="brand-image">
        <img src="images/Motorola.png" height="232px" width="115px" alt="">
      </div>
      <h3>Motorola</h3>
    </a>

  </div>
  <div class="huawei">
    <a href="huawei.html">
      <div class="brand-image">
        <img src="images/huawei.png" height="232px" width="115px" alt="">
      </div>
      <h3>Huawei</h3>
    </a>
  </div>
</div>
<div class="progress">
  <div class="progress-bar"></div>
</div>

Answer №1

let ele = getElementById("element")
let pBar = getElementById("progress-bar")

ele.addEventListener("mousehover", function() {
  pBar.style.animation = "pr 5s infinite"
})

Answer №2

To optimize, consider adding an eventListener to the specified element.

const target = document.querySelector(".target-element");
const loadingBar = document.querySelector(".loading-bar");

target.addEventListener("hover", function() {
  loadingBar.style.animation = "load 5s infinite";
})

Remember to change .target-element to your custom class

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 adding responses to input fields in AngularJS

I am looking to populate data into 3 inputs based on the JSON response I receive from my node server. However, despite receiving a response, I am unable to input it into the designated fields. Controller: $scope.edit = function(id, contact) { console.log ...

Alert: A notification when navigating away from your site

Is there a way to notify users when they click on an external link that they are leaving your site? <div class="row"> <div class="col-lg-12"> <div class="form-group"> *If you need information on other applicable forms, you ...

How does Vue handle the situation when the value of an input field does not match the bound "data"?

Before diving into the intricacies of v-model, I want to take a closer look at how v-bind behaves. Let's analyze the example below: <div id="app"> <input type="text" :value="inputtedValue" @input ...

Error: The variable $ has not been declared in the context of the function iterateId

I understand that there are many questions on SO related to this error, but my issue is a bit unique. In my code, I am using a forEach loop to retrieve the IDs and text of elements as shown below: function iterateId(id){ $("input[id*='" + id + ...

What can be done to stop the event handler from executing?

My goal is to verify a user's authentication every time they click on a button. If the user happens to be logged out and tries to click on a button, they should be redirected back to the home page. The issue I'm facing is that the code after the ...

After the animation finishes, the CSS3 :hover effect ceases to function

There seems to be an issue with my DIV element. When hovering, the background color changes to blue. However, when a button is clicked, a class is added which animates the background color to green. After this animation, the hover effect no longer works an ...

The image will only display upon receiving a link, not a path

Having some trouble displaying an image on my website, despite having successfully done so in the past for other projects. The image is located in the same folder as my HTML file. Here's what I've tried: <img src="reddit.png"/> <img s ...

IFrame issue: Page is constantly refreshing when on iframe source

Recently, I started working with asp.net and I'm attempting to call an Iframe src within a table row using a JavaScript click event. (i.e onclick="return loadPhaseWiseChart("DGSET00025");") Here is my code snippet: <tr height="25" id="row3" oncli ...

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

Tips for changing ES lint rules in a specific file within a React application

Currently, I am incorporating some older code into my React application. Webpack is generating numerous errors related to "no-restricted-globals" and "no-undef," which is preventing successful compilation. I am interested in finding a way to bypass this f ...

Develop an array in JavaScript using PHP on the server side

I have successfully created a JavaScript array in PHP and sent it to the client. However, I am now wondering how to create a JavaScript array with PHP and store it on the server. Can anyone provide some guidance on this? Thanks in advance! ...

Angular does not always interpret the value returned from a Promise.all call

One of the challenges I'm facing is related to the structure of my controller: controller.things = ['a', 'b', 'c']; controller.loading = true; controller.responses = []; controller.handlePromises = function(){ var pr ...

Failure to Fetch the Uploaded File's Value Using the Parameter

Objective: My aim is to automatically upload the second input named "file2" to the action result using jQuery code that is compatible with the latest versions of Firefox, Chrome, and Internet Explorer. Issue: The problem arises when HttpPostedFileBase ...

How to change the padding of a parent element in CSS3?

I've created a circle-shaped div element using the following code: #circle{ width: 320px; height: 320px; background-image: url('image.jpg'); border-radius: 50%; background-position: 50% 50%; transition: all 1s; } This circle expands on hov ...

Steps to indicate a cucumber test as incomplete using a callback function in a node environment

Can a cucumber test in Node be flagged as pending to prevent automated test failures while still specifying upcoming features? module.exports = function() { this.Given(/^Scenario for an upcoming feature$/, function(callback) { callback(); } ...

Monitoring WooCommerce order submissions through AJAX

I'm exploring the world of Ajax for the first time. My goal is to submit an order tracking form and show the results using AJAX. I attempted to use Ajax to display the results within div track_result. The issue I'm facing is that the following ...

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

"Encountered an error: File or directory not found while attempting to export a function

src/test.js module.exports.test = function() { const { readFileSync } = require('fs'); console.log(readFileSync('test.txt', 'utf8').toString()) } index.js const { test } = require('./src/test.js'); test(); ...

Attempting to send numerous identifiers in an API request

I encountered a problem while working on a function in Angular that involves pulling data from an API. My goal is to enhance a current segment to accommodate multiple IDs, but I face difficulties when attempting to retrieve more than one ID for the API que ...

What strategies can be implemented to enhance the performance of this jQuery slider?

I have successfully created an image carousel. https://i.sstatic.net/CbypXxRr.png Encountered Challenges: The last slide is displayed, but the counter shows the first slide. How can I resolve this issue? When clicking play, it continues to advance ...