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'm currently working on developing a shopping cart component in React, but my supervisor has advised against using CSS directly in the HTML markup due to security concerns. While I understand the importance of good coding practices, I fail to see how ...
I am working on a view where I display dynamically expanding cards upon hover. Below is the CSS code snippet: .card-deck .card { height:200px; width: 200px; transition: transform .1s; } .card-deck .card:hover { -ms-transform: scale(1. ...
I've been applying the following CSS: .text_style3{ font:normal 8px Helvetica; color:#f7922c; } I'm trying to decrease the size further, but anything below 10px doesn't seem to work. I've attempted using 7px, 6px, 5px, etc., w ...
Utilizing Angular Material, I have implemented tabs within an md-dialog. The dialog smoothly adjusts its height based on the content of the active tab during navigation. However, when utilizing an ng-if directive to toggle visibility of content, there is n ...
Right now, I am engaged in a process that involves: creating a canvas and attaching it to a division applying a background image through CSS to that canvas. drawing a hex grid on the canvas placing PNGs on the canvas. animating those PNGs to show "movem ...
Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...
Here is the code for a function called EVOLVE1: function EVOLVE1() { if(ATP >= evolveCost) { display('Your cell now has the ability to divide.'); display('Each new cell provides more ATP per respiration.'); ATP = ATP ...
Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...
I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...
Refer to this post for more information: Click here I attempted to access a function that was defined in another .js file based on the instructions from the post. However, I encountered an issue. Take a look at my code below: sildemenu.js $(document).re ...
I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...
I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...
I am looking to change the appearance of my Instagram icon when hovering over it. I want the background to turn white and the icon to become colored. Here is my code snippet from Footer.js : <a href="https://www.instagram. ...
I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened. For example, I want it to go from this initial layout: ...
I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...
My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...
Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...
I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...
To ensure that the height and width of a parent div that contains a child textarea are exactly equal, you can utilize the following CSS code snippet: https://jsfiddle.net/BwVQZ/7/ <div> <textarea></textarea> </div> div{ hei ...
I've been trying to use word-wrap to break long words into the next line, but unfortunately it's not working as expected. You can view my JsFiddle code for reference. The divs on my page are generated dynamically, and here is an overview of what ...