title: How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?
body: <p>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 <em>every OTHER link BESIDES the one you are hovering</em>.  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.  </p>
  
  <p>now i've tried some css things that ive looked up, something like this:</p>
  
  <pre><code>.menu-link:a + .menu-link {opacity: 0.7;}
  </code></pre>
  
  <p>...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.</p>
  
  <p>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 <em>all other objects</em> with that class?  Thanks for any help!</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="col-lg-2 col-md-2 menu-border"&gt;
                          &lt;div class="menu-list"&gt;
                              &lt;h4 class="list-title"&gt;Blog&lt;/h4&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;Archive&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;Tag Cloud&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-2 col-md-2 menu-border"&gt;
                          &lt;div class="menu-list"&gt;
                              &lt;h4 class="list-title"&gt;Profile&lt;/h4&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;Artist Profiles&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;Submit A Profile&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-2 col-md-2 menu-border"&gt;
                          &lt;div class="menu-list"&gt;
                              &lt;h4 class="list-title"&gt;Connect&lt;/h4&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;SoundCloud&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="menu-link" href="#"&gt;linkedIN&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>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 ) </p>