Tips for Modifying CSS Design for Unhovered Elements

HTML

<ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

#menu li{
    width:80px;
}
#menu li:hover {
    width:200px;
}

I am looking to adjust the width of all other <li>s to 60PX when one is hovered, and then revert back to 80PX when none are hovered. How can I achieve this?

javascriptjqueryhtmlcss

Answer №1

Utilizing jQuery

jQuery(function ($) {
    $('#menu li').hover(function () {
        $(this).width(200).siblings().width(60)
    }, function () {
        $(this).siblings().addBack().width(80)
    })
})

Check out the live demonstration: Fiddle

Answer №2

I am looking to change the width of certain <li> elements to 60px when one is hovered over, and then revert them back to 80px when none are hovered.

If you are using jQuery, you can achieve this with the following code:

$('#menu li').hover(function(){
    $('#menu li').css('width','60px');
    $(this).css('width','80px');
},function(){
   $('#menu li').css('width','80px');
});

You can view a demo here.

Answer №3

If you want to target li elements that are not being hovered over, you can use the following CSS code:

#menu li{
    width:80px;
    color: green;
}
#menu:hover li{
    color: yellow;
}
#menu li:hover {
    width:200px;
    color: red;
}

Answer №4

To accomplish this effect, apply the :hover selector to both the li and ul elements.

    ul li{
       width:80px;
    }

    ul:hover li{
       width: 60px;
    }

    #menu li:hover {
       width:200px;
    }

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

External variable unable to store MySQL result

I've exhausted all the resources available online in my attempts to make this work, but unfortunately, none of them have been successful. I'm attempting to run a query on an SQL database and then store the result in a global variable. I've t ...

javascriptmysqlnode.jsexpressasynchronous

javascript - modifying nested field based on condition in map

In the scenario of having an array like this: people = [ { name: 'Bob', sex: 'male', address:{ street: 'Elm Street', zip: '12893' } }, { name: ...

javascriptarraysdictionaryif-statementnested

Unable to apply ready function in jquery .load

When the document is ready, the following code is executed: jQuery(document).ready(function(){ jQuery('#button').click(function() { jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt"); ...

javascriptjqueryajax

Exploring AngularJS's capabilities with Cross Domain POST requests

One query I have concerning CORS requests that include the HTTP Authorization header: I've noticed that the web browser doesn't seem to send the Authorization header with POST requests, is there a workaround for this? Below is the Angular code ...

javascriptasp.netangularjs

"Retrieving a unique identifier from a child page by using the href attribute in the parent page

Is it possible to load a specific ID from a child page and display that content in a dialog on the parent page when a link is clicked? I want to load the DIV ID "medical" when the medical link is clicked, and I am looking for a way to add a selector in the ...

jqueryjquery-ui-dialog

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

javascripthtmlangularjsjson

ASP.NET Web API calls are not properly deserializing the POST body from XDomainRequest in JSON format

Trying to enable cross-browser, cross-domain support for a web application using MVC4 and making ajax calls to an MVC4 web api, I've resorted to using the XDomainRequest object. This helps in facilitating cross-domain ajax calls from IE < 10 client ...

jqueryasp.net-web-apixdomainrequest

Storing a collection of strings in a MongoDB database: A step-by-step guide

I have come across a few similar questions on stack overflow like this one: How to store an array of Strings in Node MongoDB Mongoose - Save array of strings However, I am unable to understand why my method is not working. I am attempting to save the str ...

javascriptnode.jsmongodbexpressmongoose

Unable to activate Vue 13 keyCode in a text field using jQuery with Laravel Dusk Testing

I've been grappling with this issue for a few days now. I'm trying to create a Laravel Dusk test that incorporates the Vue.js framework. There's a method that should be triggered when the user hits the ENTER key. I recently discovered that ...

javascriptjqueryvue.jskeyboard-eventslaravel-dusk

The issue with the Bootstrap 5 navbar in an Angular project is that it expands properly but fails to close when

I am currently working on developing a Single Page Application using Angular 12 and Bootstrap 5. As part of this project, I have created a shared navbar component. The issue I am facing is that when the navbar transitions to the hamburger menu button for ...

htmlangulartwitter-bootstrapbootstrap-5

Using the @ symbol in jQuery within an MVC framework can be achieved by first ensuring that

I'm attempting to incorporate the @ symbol into a JavaScript if condition, but I keep receiving an error. if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) { alert('yes'); ...

javascriptjqueryasp.net-mvc

Complete the modal window form

I'm currently facing an issue with populating a modal window form. To provide some context, when I click on a grid row to edit a user, I make an ajax call which fetches specific data related to that user. Here is the existing code snippet: <modal ...

javascriptangularjs

"Remaining Elements" within a CSS Design

I am faced with a challenge where I have 4 elements nested inside a container element. The height of the container should be set to 100% of the browser window. The inner elements need to stack vertically, with the first two and last elements having a natur ...

htmlcsslayoutpositioning

How can you continuously attempt to retrieve a specific URL until successful at 0.5-second intervals?

Right now, I am using a simple try once method: $.getJSON("server.json", function(data) { servicesList.render(data); }); I am curious about how to attempt the request every 0.5 seconds until success? ...

javascriptjqueryjsonloops

How can one determine the completion of a chunked download request in Angular's HTTP client?

Currently, I am utilizing angular's HttpClient to retrieve an arraybuffer. The server is transmitting the data along with the following headers: *To avoid any confusion, the download route essentially retrieves a chunk file stored in the cloud. Howev ...

javascriptangularexpress

Error Encountered in Vue.js when Trying to Access a Nested

Below is a snippet of my route code from app.js let routes = [{ path: "/dashboard", component: require("./components/Dashboard.vue") }, { path: "/tour", component: require("./components/Index.vue"), children: [{ name: &apos ...

javascriptvue.jsvuejs2vue-router

How can we handle multiple asynchronous calls within a function?

In the process of developing a dynamic page with heavy AJAX interactions that update values in selectors based on prior selections. Currently, working on implementing a "repopulate" feature to fill in selectors based on previous entries. Whenever Selector ...

javascriptjqueryajaxasync-await

Use Material UI Grid to create a horizontal line design instead of focusing on making the

Is there a way to turn off responsiveness for the material UI grid similar to how it can be done with a basic HTML table? While an HTML table scales down and adds a horizontal scroll bar, the material UI grid remains responsive as shown in the example belo ...

javascriptreactjsmaterial-ui