What is the best way to apply hover effects to all links except the one being hovered over, using a combination of javascript, jquery,

While browsing the web, I came across a fascinating hover effect that I'm eager to replicate in a website's navigation bar. This effect doesn't just change the link you hover over, but it alters every other link in a unique way. When hovering over a link, all other links in the menu list fade in opacity, leaving the hovered link at full opacity.

I've tried implementing some CSS solutions like the following:

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

However, this only affected the link next to the one being hovered over, not all links with the same class. I suspect this kind of effect requires JavaScript, but I'm a beginner and struggling to figure it out.

Can anyone assist me in creating a function using jQuery or JavaScript that detects a hover on an object with a specific class and applies an effect (like lowering opacity) to all other objects with the same class? I appreciate any guidance!

Edit: In response to a request for code, here is a snippet of the menu links I'm working on, displayed as unordered lists within a header section:

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

Each sub-menu link has been assigned the "menu-link" class, and I'm seeking assistance on creating a function that will apply a specific effect (such as fading to a lower opacity) to all other links with this class when hovering over one of them.

javascriptjqueryhtmlcsshover

Answer №1

To achieve this effect using jQuery, you can use the following code snippet:

jQuery

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

CSS

.toggle {
  opacity: 0.7;
}

Check out this interactive demo on JSFiddle to see it in action: http://jsfiddle.net/HMq67/

By using toggleClass() and not(), you can easily change the style of elements that are not currently being hovered over.

Answer №2

Feel free to check out this jsFiddle and give it a go. It might be just what you need.

Basically, the solution involves using javascript to detect when the mouse hovers over and out of an element. It then targets all elements except the one currently being hovered 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');
});

Answer №3

After 4 years...haha.

You can easily achieve this effect using basic CSS!

Here's how the code should look like based on what you provided:

.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;
}

Check it out on this Fiddle: https://jsfiddle.net/fz6bumxx/6/

Just a heads up - I've set the a tags within each list item to block to ensure that the link fades only activate when hovering over a link.

Hope this explanation is helpful!

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

Create a personalized Command Line Interface for the installation of npm dependencies

I am looking to develop a Node CLI tool that can generate new projects utilizing Node, Typescript, Jest, Express, and TSLint. The goal is for this CLI to create a project folder, install dependencies, and execute the necessary commands such as npm i, tsc - ...

javascriptnode.jsnpmcommand-line-interface

Rails application experiencing difficulties in displaying the Raty JS plugin

Encountering issues with the raty js plugin while working on Rails version 5.0. jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined at jquery.raty.self-628421be ...

javascriptjqueryruby-on-railsrubyraty

Making an AJAX POST request with jQuery to a specific subdomain

I am experiencing difficulties with an Ajax Request across different SubDomains. The PHP Script responsible for handling the request can be found at account.domain.com/login Despite having multiple SubDomains, the Ajax request is accessible from all of t ...

phpjqueryajaxsubdomain

What is the best way to create rounded corners on a WordPress login page?

I recently implemented the Custom Login Page Customizer plugin on my WordPress website and it has created a beautiful login page. While I was able to round the corners of my logo using CSS, I'm struggling to achieve the same effect on the login form. ...

csswordpresscustomizationrounded-corners

Retrieving the HTML content of a Drupal article using jQuery's $.get method

I have written an article and saved it in Drupal 7. I am looking for a method to extract the HTML content of that article using jQuery's $.get() from a different web application. I only need to retrieve the individual article content, not the entire D ...

jqueryajaxdrupal

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

When working with higher order functions in JavaScript, we have the ability to access the element, index, and iterable that the function is being performed on. An example of this would be: [10,20,30].map(function(element, index, array) { return elem + 2 ...

javascriptpythonlambdahigher-order-functions

three.js fur effect not appearing on screen

I have been working on understanding and implementing fur in three.js. I came across an example at which I used as a reference to comprehend the code. The model loads successfully, but the issue arises when the fur texture doesn't load. I have check ...

javascripthtmlthree.js

Is it possible for me to utilize this code for logging in through a dialog box?

Here is the code snippet I have on the client side: <p>Username:</p> <p><asp:TextBox ID="tbUsername" runat="server"></asp:TextBox></p> <p>Password:</p> <p><asp:TextBox ID="tbPassword" runat="server ...

c#javascriptjqueryasp.netdialog

What is the best way to display a div beneath the highlighted text within a textarea field?

I have encountered a situation where I want to display a div (like a popup) when text is selected in a text area. However, when using mouse-down for this action, the position of the div sometimes does not align directly below the selected text. Below is t ...

javascriptjquerycss

The error message encountered is related to a problem with the e.slice function within the Kendo UI

Everything was running smoothly until serverGrouping feature was activated and I tried to group some data by dragging and dropping a column. An error message appeared on the JavaScript console: e.slice is not a function. I suspect that there might be an ...

jqueryajaxkendo-gridkendo-datasource

Utilizing dropbox.js in combination with OAuth 1: A step-by-step guide

I'm in the process of revamping a website that already exists, and although I have the code from the previous version, I'm encountering challenges replicating certain functionalities in the new iteration. Here's the situation: The user is ...

javascriptoauthdropboxdropbox-api

Tips on transforming a grouped object into a table organized by column with the help of Lodash

Looking at my array data: [{ id: '1234', year: 2019 , name: 'Test 1- 2019', rate: 1}, { id: '1234', year: 2020, name: 'Test 2 - 2020', rate: 2 }, { id: '1234', year: 2020, name: 'Test 3 - 2020&apos ...

javascriptvue.jsloopslodash

Is it achievable to employ the object "angular" while still implementing the 'use strict' directive?

Whenever I use gulp-jshint, it requires me to include the 'use strict' directive in every file. This causes an issue with my global object emApp, defined in my app.js file as: var emApp = angular.module('emApp'); Interestingly, jshint ...

javascriptangularjsgulpjshint

Tips for manually adding CSS/JS files for offline usage with Vue.js CLI

I am currently utilizing Vue.js CLI alongside AP.NET Core in a single-page application. I have identified the need to bundle some JavaScript/CSS files locally instead of relying on a CDN due to potential deployment scenarios without internet access. The co ...

htmlvue.jsasp.net-corebundling-and-minificationvue-cli

What is the importance of chaining selectors in order to utilize flexbox effectively?

Check out this code snippet: .flex-container { border: solid 1px purple; display: flex; } .flex-container div { border: solid 1px red; padding: 20px; margin: 20px; height: 100px; flex: 1 1 0%; } .flex-container ...

htmlcssflexboxfrontend

"Sending an array in a POST request using Javascript and processing it on the server

I am trying to use ajax to send an array. Let's say the array looks like this: var anotherOne = 'anotherOneData'; var documents = ['banana', 'apple', 'monkey']; I successfully sent both a normal value and an a ...

javascriptjqueryajaxnode.js

What is the best way to position two divs side by side at the bottom of the

When trying to align my second div with the first one, I face an issue. If the text above the first blue box is longer, the second div appears to be outside the line of the box. Changing the relative position doesn't solve this problem either. When th ...

htmlcss

Storing various duplicates of items in local storage

Looking for help with storage settings in HTML/JavaScript as I work on a mobile not taking app using Phonegap. My goal is to allow users to input a note name and content, save them into a jquery mobile list, and see them on the home screen. However, I&apos ...

javascripthtmlcordovajquery-mobilelocal-storage

Instructions for placing the navigation links below the navigation brand

Could you please advise me on how to center the navigation links below the brand logo? I am new to coding and just starting out. Here is a link to a page that demonstrates what I am trying to achieve: In this example, the brand name is "a fork and a pe ...

htmlcssbootstrap-4

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...

javascriptjqueryhtml