Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand...

The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on the outer div should navigate to a specific link.

Here is the HTML structure...

<div>
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-m transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-o transition">modo</a>
</div>    
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-d transition">modo</a>
</div>
<div class="hi-icon-wrap hi-icon-effect-6 hi-icon-effect-5d transition">
        <a href="#" class="hi-icon hi-icon-modo-star transition">modo</a>
</div>

Highlighted CSS styles for internal hovers...

    .hi-icon-effect-5 .hi-icon {
    border-top: 5px solid #C30;
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-6 .hi-icon {
    background: rgba(255,255,255,1);
    border-top: 5px solid #000;
    overflow: hidden;
    -webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    -moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-5 .hi-icon:after {
    display: none;
}

.hi-icon-effect-6 .hi-icon:after {
    display: none;
}

.hi-icon-effect-7 .hi-icon:after {
    display: none;
}

.no-touch .hi-icon-effect-5 .hi-icon:hover {
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: #000;
    color: #FFF; /* Hover Icon */
}

I hope this explanation clarifies the issue.

javascriptjqueryhtmlcss

Answer №1

To enhance the visual appeal of your website, consider adding a class to the main div. For instance, you could include `class=maindiv' in the containing div.

Subsequently, you can update your CSS with the following code:

.maindiv:hover .no-touch .hi-icon-effect-5 .hi-icon {
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.maindiv:hover .no-touch .hi-icon-effect-6 .hi-icon {
    background: #000;
    color: #FFF; /* Hover Icon */
}

Rather than having the effects triggered upon hovering over the .hi-icon, these effects will now activate when hovering over the .maindiv.

UPDATE

You may want to make this adjustment in your CSS instead of the previously mentioned method:

.maindiv:hover .hi-icon-effect-5 .hi-icon{
    background: #C30;
    color: #FFF; /* Hover Icon */
}

.maindiv:hover .hi-icon-effect-6 .hi-icon {
    background: #000;
    color: #FFF; /* Hover Icon */
}

Answer №2

Perhaps I'm way off base, but what do you think about using the .addClass method on each of those divs when hovering over the main div?

Check out this example FIDDLE (I didn't add a class, just used .animate to illustrate my point)

$( "#Activate" ).mouseover(function() {

$("#Activate > .hi-icon-wrap").each(function (index) {
    $(this).delay(index * 500).animate({
        opacity: 0.5
    }, 500);
});
  });

  $( "#Activate" ).mouseout(function() {
    $(".hi-icon-wrap").animate({opacity: 1}, 500);
});

I apologize if this isn't at all what you had in mind.

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

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

javascripthtml

Converting every item's values into keys

Currently, my goal is to export all object values as keys specifically for a tree-shakable import system in a plugin I'm currently developing. The approach involves dynamically importing modules from various directories and subfolders, consolidating t ...

javascriptnode.jsecmascript-6es6-modules

Interact with gridview rows using jQuery on the main page

I've been exploring ways to make it possible for the user to click on a row within a gridview in a master page. My ultimate goal is to redirect the user to another page while passing along values from the gridview (specifically from the hiddenfield co ...

jqueryasp.netgridview

Is it possible to asynchronously retrieve the information from the HTTP request body in a Node.js environment?

I am trying to send an HTTP POST request to a node.js HTTP server that is running locally. My goal is to extract the JSON object from the HTTP body and utilize the data it contains for server-side operations. Below is the client application responsible fo ...

javascriptnode.jshttppost

Exploring Object Elements using For Loop

After trying numerous methods, I am still puzzled by this issue. I have a feeling that the solution is going to be something very simple, but nevertheless, I need to ask for help. This is the function I'm dealing with: Module.load = function(a) { ...

javascriptnode.jsfor-loop

Display the dropdown menu option value depending on the input value provided

I have a form field where users can input the number of people. Based on this input, I want to dynamically display only those tables that can accommodate the specified number. How can I achieve this using jQuery? <div class="control-group "> < ...

jquery

Is it a good idea to relocate the document.ready function into its own JavaScript function?

Can the following code be placed inside a separate JavaScript function within a jQuery document.ready, allowing it to be called like any other JavaScript function? <script type="text/javascript"> $(document).ready(function() { $('div#infoi ...

javascriptjquery

Encountering the error message "Unexpected token export" while attempting to implement the "framer-motion" package with Webpack

My experience with NextJS has been smooth sailing until now. I recently added the "framer-motion" module to animate some components, and it caused a major issue. Whenever I navigate to a page containing the import statement: import { motion } from "fr ...

javascriptwebpackecmascript-6babeljsnext.js

Utilizing VueMq for personalized breakpoints and module inclusions

In my main app.js, I set and define breakpoints by importing the VueMq package. import VueMq from 'vue-mq'; Vue.use(VueMq, { breakpoints: { xsmall: 500, small: 768, medium: 1024, large: 1360, x ...

javascriptvue.jsimportvuejs2

What is the best way to utilize the .done() callback in order to execute a function when new data is loaded upon request?

I have a web page that pulls data from a JSON feed, and there's also a button to load more content from the feed when clicked. I want to add additional elements inside the page for each item in the feed. I've managed to create a function that doe ...

javascriptjqueryajax

JavaScript issue: Submitting form does not trigger the associated function

I am currently in the process of learning JavaScript as part of my university course, and I have encountered an issue where my function is not being called. I am seeking to gain a better understanding of why this problem is occurring. Summary The situati ...

javascripthtmlforms

Image transformed by hovering effect

I've been attempting to add a hover effect to the images in my WordPress theme. The images are displayed in a grid format, created by the featured image on the posts. The grid layout is controlled within content.php <?php /** * controls main gri ...

javascriptjqueryhtmlcsswordpress

Challenges with loading content on the initial page load using the HTML5

Upon page load, I wanted to save the initial page information so that I could access it when navigating back from subsequent pages. (Initial Page -> Page2 -> Initial Page) After some trial and error, I ended up storing a global variable named first ...

javascriptjqueryhtmlhistory.jshtml5-history

Shorten the text in a flex container using ellipsis and flex-grow

I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...

htmlcssflexboxellipsis

Issue with accessing Factory in Controller Method in AngularJS

When I invoke a factory method within the controller, everything works smoothly. However, when I call a factory method within a specific controller method, it returns as undefined. Below is my factory setup: app.factory('config', ['$http&a ...

javascriptangularjsangularjs-controllerangularjs-factory

The HTML form input allows users to input multiple answers for each field

I am struggling with how to phrase this question properly, but I will do my best. Currently, I have a form that collects information about users' employment history. The structure of my form is as follows: <form name="EmploymentHistory" action="Fo ...

htmlmysqlarraysformsinput

Integrating Flask with React for a cohesive frontend and backend connection

Recently, I decided to try my hand at setting up a webapp using Flask and React by following a YouTube tutorial. Despite encountering a few issues with virtual environments (which I ultimately resolved by not using one), I managed to closely follow the tut ...

javascriptpythonreactjsflask

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

Using Joomla 2.5 and mootools for ajax - passing parameters to a component

After countless hours of searching for a solution to this persistent issue, I find myself stuck with the following code in a standard component along with its controller: defined('_JEXEC') or die; jimport('joomla.application.component.cont ...

jqueryajaxjoomla

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

htmlangulardom