CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mbond
mbond

Reputation: 37

Hover over one div triggers other div hovers inside

Ok working on something and can't seem to figure it out have tried a few different things but nothing seems to solve it. So here is the link to what I'm doing...

http://modocom.ca/logo/

Now what I'm trying to do is have the outer div when you rollover it, it animates all the inner divs at once. Also trying to achieve so can click on the outer div to go to a link.

Here is the HTML...

<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>

Some of the CSS for the inner 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 */
}

Hopefully that makes sense.

Upvotes: 2

Views: 556

Answers (2)

JCBiggar
JCBiggar

Reputation: 2507

You need to add a class to your main div... in this case lets say you add `class=maindiv' to the containing div.

Then in your css use this:

.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 */
}

instead of the effects applying when you hover over the .hi-icon the effects apply when you hover over the .maindiv

UPDATE

add this to your css instead of the above:

.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 */
}

Upvotes: 3

Fizor
Fizor

Reputation: 1530

I might be horribly off track, but could you use .addClass to each of those divs when you hover over the main div?

Something like this FIDDLE (I didnt add a class, i just used .animate to get my point accross)

$( "#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);
});

Apologies if this is nothing at all what you were looking for.

Upvotes: 0

Related Questions