CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user2251230
user2251230

Reputation: 25

How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

I recently saw a very interesting effect I would like to create in a navbar for a website. The effect was a hover effect, used for links in a menu list. Instead of the typical "change the link when you hover over it" , it changes every OTHER link BESIDES the one you are hovering. In the example I saw when you hover over one link in the list, it applied an opacity fade to all the other links, leaving the link you are hovering over at full opacity.

now i've tried some css things that ive looked up, something like this:

.menu-link:a + .menu-link {opacity: 0.7;}

...but that only achieved the effect for the link next to it , not all links with the same class. I'm assuming this can be achieved with javascript but im such a noob I cannot figure it out.

So could anyone help me figure out how to code up a quick function like this in either jquery or javascript? something that looks for a hover on an object with a specific class and then having an effect (such as lowering opacity) performed on all other objects with that class? Thanks for any help!

EDIT: okay i was asked to provide some code. this is the "menu of links" i have been working on, the are just a series of unordered lists that show up in a header div at the top of the page:

<div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Blog</h4>
                            <ul>
                                <li><a class="menu-link" href="#">Archive</a></li>
                                <li><a class="menu-link" href="#">Search</a></li>
                                <li><a class="menu-link" href="#">Tag Cloud</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Profile</h4>
                            <ul>
                                <li><a class="menu-link" href="#">Artist Profiles</a></li>
                                <li><a class="menu-link" href="#">Submit A Profile</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Connect</h4>
                            <ul>
                                <li><a class="menu-link" href="#">SoundCloud</a></li>
                                <li><a class="menu-link" href="#">linkedIN</a></li>
                            </ul>
                        </div>
                    </div>

they are just a few sub menus; however i have given all the links in all the sub menus a class ("menu-link") and I'm trying to figure out how to make a function that when hovering over one link with the "menu-link" class, all other links with that class do something (in my particular case i want them to fade to a > 1 opacity )

Upvotes: 0

Views: 3565

Answers (3)

McDeeez
McDeeez

Reputation: 31

4 years later...lol.

You can achieve this with simple CSS!

For the code you provided above it would look like this:

.menu-list ul:hover .menu-link {
  opacity: 0.7;
}

.menu-list ul:hover .menu-link:hover {
  opacity: 1;
}

.menu-list ul li a {
  display: block;
}

Fiddle: https://jsfiddle.net/fz6bumxx/6/

Note - I'm setting the a tags within each list items to block so that you can't trigger the link fades without hovering over one of the links.

Hope this helps!

Upvotes: 1

Damon
Damon

Reputation: 4484

Give this jsFiddle a try. If nothing else, it should get you going.

In essence, you will need javascript to listen for the mousover and mouseout events. Then select all elements except the one you are currently hovering over.

$('nav li a').mouseover(function () {
    $('nav li a').not($(this)).addClass('hover');
});

$('nav li a').mouseout(function () {
    $('nav li a').not($(this)).removeClass('hover');
});

Upvotes: 2

Dryden Long
Dryden Long

Reputation: 10182

Using jQuery, you could do something like this:

jQuery

$('a.menu-link').hover(function(){
 $('a.menu-link').not(this).toggleClass('toggle');
})

CSS

.toggle {
  opacity: 0.7;
}

Here is a fiddle of it in action: http://jsfiddle.net/HMq67/

Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.

Upvotes: 6

Related Questions