My navbar has the following structure:
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#services">Services</a></li>
<li class="nav-item"><a href="#work">Work</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
When I hover over one item, I would like to change the styling of the other two. Which CSS selector should I use?
To trigger the hover effect on the entire navbar except for the currently hovered child item, you can use this CSS:
.navbar-nav:hover li:not(:hover) {
background: red;
}
The :not selector can be utilized to add styles to elements that are not currently being hovered over without the need to explicitly style them:
.menu.dropdown-menu li a:not(:hover) {
text-decoration: underline;
}
To add a hover effect to the navigation bar, target the nav wrapper and style all of its `li` children. Then, apply a separate hover effect to the individual `li` elements to make them stand out. You can see an example implementation here: JS Fiddle
ul.nav:hover li.nav-item {
background: green;
}
li.nav-item:hover {
background: transparent;
}
There doesn't seem to be a straightforward CSS solution for this task, but fear not! With a little help from jQuery, you can achieve it effortlessly.
$(function(){
$('.navbar-nav nav-item:hover').siblings().css('background-color', 'red');
});
If you want to achieve a similar effect, consider using the following CSS:
ul:hover li {
background-color: blue;
}
ul li:hover {
background-color: none;
}
Feel free to check out this DEMO for a visual representation.
Additonally, you can learn more about this technique in the article titled Hover on “Everything But”.
I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular pr ...
While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly u ...
My goal is to create a fixed header and footer, allowing the main content to scroll underneath while keeping the right navigation in place. To achieve this effect, I've been experimenting with different solutions. One of my attempts can be viewed her ...
Just finished my very first jQuery project, a simple full-width slider. I've been focusing on HTML & CSS and currently working with C#. The problem is that I don't want the page to be scrollable; I want it to autofit to the webpage. Imagine ope ...
Currently, I am working with Fluid 960 and encountering some unexpected behavior with alpha/omega. Typically, I utilize alpha/omega to adjust left and right margins within nested grids. Oddly enough, when I use alpha/omega on a set of nested grids, the gr ...
I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...
Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...
Why is the green container expanding over the blue column when I apply height: 100% or h-100? Is there a way to make it fit just the remaining height of the column? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstra ...
I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...
My decision to eliminate all ids from my CSS and transition to HTML 5 has led me to question the use of roles in markup. In the past, IDs were used to style sidebars individually within a single selector for both. Here is an example: <div id="sidebar" ...
https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...
Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...
I've been experimenting with a fantastic technique by Chris Coyier for implementing full page video backgrounds with content scrolling over the video. However, I've encountered an issue where there's an unexpected gap to the right in Windows ...
I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...
While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...
Curious to know the name of the effect where images scroll in a different orientation than the page, creating a 2D appearance. Take a look at the Google Nexus website and scroll down - do you see the effect? What is this effect called? Is it created usin ...
Having an issue with the "Start button" that plays both animation and background sounds. When I pause it, the animation does not stop where it left off and starts from the beginning again. I tried using animation-play-state: pause and animation-fill-mode: ...
There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...
I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...
I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...