I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink.
.navlink {
width: 100px;
display:inline-block;
background-color: red;
}
.navlink:hover~.navlink {
width: 50px;
}
.navlink:hover {
width: 150px;
background-color: pink;
}<a class="navlink">link 1</a>
<a class="navlink">link 2</a>
<a class="navlink">link 3</a>
<a class="navlink">link 4</a>If you're looking to organize your links with flexbox, you can easily adjust the size of a hovered link while the rest shrink automatically.
.container {
display: flex;
width: 400px;
}
.navlink {
flex: 1;
margin: 0 5px;
background-color: red;
transition: 0.3s all;
}
.navlink:hover {
flex: 3; /*Change this value to adjust the size*/
background-color: pink;
}<div class="container">
<a class="navlink">link 1</a>
<a class="navlink">link 2</a>
<a class="navlink">link 3</a>
<a class="navlink">link 4</a>
</div>My recommendation is to maintain the original width of the resize, ensuring that it remains consistent with the initial measurements. For example, if you start with four elements at 100px, resulting in a total width of 400px (accounting for any margin/padding), then adjust the resized elements accordingly to maintain a clean appearance.
.navlink {
display: inline-block;
width: 100px;
background-color: red;
transition: width 0.3s;
}
.container:hover .navlink:not(:hover) {
width: 75px;
}
.navlink:hover {
width: 175px;
background-color: pink;
}<div class="container">
<a class="navlink">link 1</a>
<a class="navlink">link 2</a>
<a class="navlink">link 3</a>
<a class="navlink">link 4</a>
</div>Check out the following HTML code snippet:
<div class="container">
<a class="menu-link">Menu Item 1</a>
<a class="menu-link">Menu Item 2</a>
<a class="menu-link">Menu Item 3</a>
<a class="menu-link">Menu Item 4</a>
</div>
Here's the accompanying CSS styling:
.menu-link {
width:100px;
background-color:red;
display:inline-block;
}
.container:hover .menu-link{
width:50px;
}
.container .menu-link:hover{
width:150px;
background-color:pink;
}
Seeking assistance on understanding how background images and linear gradients function together. Currently, I am only seeing a solid color instead of the intended image. Can someone please explain how this code is supposed to work? background-image:lin ...
Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...
Seeking assistance from experts on the process of removing a class from an element solely using JavaScript. Kindly refrain from suggesting solutions involving jQuery as I am unable to utilize it, and have little knowledge about its functionalities. ...
Struggling to locate the source of the margin-top when utilizing the affix plugin on my Navbar. You can view [my website here] for better understanding. Should I be implementing Javascript to solve this issue? My current skills in that area are not very ...
I am facing an issue with displaying multiple images using flexbox. Whenever an image cannot fit in the same row, it leaves a gap which disrupts the layout. https://i.sstatic.net/bXltY.jpg My goal is to resize these images dynamically so that there are n ...
I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image. Here's an example of the current issue. Curren ...
I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...
I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...
I am encountering an issue. I am working with Node.JS nodemailer. const url = `${url}`; var mailOptions = { from: 'stackoverflow', to: email, subject: 'test', html: 'Please click this email to confirm your email: &l ...
After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...
Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...
While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...
How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...
I've been working on creating a responsive layout button that resembles the following design: https://i.sstatic.net/v5vDd.png However, I've encountered an issue where I can't seem to generate all three horizontal lines, only one of them. T ...
I am looking for a way to display my MPTT model as a tree with dropdown capability (open/close nodes with children) and buttons that can expand/collapse all nodes in the tree with just one click. I have searched for examples, but the best I could find is ...
I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...
PS C:\Users\Hp\Desktop\web technology\NCT\carrental> npm run build [email protected] build react-scripts build Attempting to generate an optimized production build... Compilation failed. The error message "static/c ...
Currently, I am developing an electron application. In my index.html file, I have successfully loaded JavaScript files in the head tag and can access the JS functions without any problems. Now, I have created a separate browser window with another HTML fi ...
I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...
I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...