Adjust the padding when hovering using CSS

Hey everyone, newbie here taking a crack at my first Joomla module! I've made some progress but hit a snag with my CSS styling - I think it's an issue with my selectors and my limited understanding of what's going on.

Basically, I'm attempting to increase the padding-right of one of the li elements when hovering over it. The effect is working, but both li elements are growing instead of just the one I'm focused on.

Any assistance would be greatly appreciated!

Here's the HTML:

<div>
<ul id="social">
<li>one</li>
<li>two</li>
</ul>
</div>

Here's the CSS:

#social{
    position:fixed;
    z-index:1000;
    top:50%;
    right:0px;
    list-style:none;
        }

#social li{
    padding-right: 5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    background-color: #202020;
    border-radius: 4px 0 0 4px;
    margin-top:15px;
    -moz-transition: padding-right .3s ease-in;
     -o-transition: padding-right  .3s ease-in;
     -webkit-transition: padding-right  .3s ease-in;
     transition: padding-right  .3s ease-in;
    }

#social li:hover{
    padding-right: 25px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    }
csscss-selectors

Answer №1

It seems likely that the reason for this behavior is due to the fact that li is a block element, which automatically expands to fill its parent (the ul). As one li grows, it pushes out the parent element, causing the other li to adjust its size accordingly. This ensures that all lis remain uniform in size.

While there may be alternative solutions available, you could try applying the following styles to the li elements:

float:right;
clear:both;

This approach works by changing the behavior of the elements to act as inline elements, aligning them to the right side while ensuring they remain on separate lines.

Another option is to insert an inline element within each li (like a span or a), modify the styling of the li elements to target the anchor tags, and introduce a simple style rule for the li to set text-align:right. Additional styling adjustments may be necessary, but these changes should provide the basic functionality required.

<div>
<ul id="social">
  <li><a href='#'>one</a></li>
  <li><a href='#'>two</a></li>
</ul>
</div>

#social{
    position:fixed;
    z-index:1000;
    top:50%;
    right:0px;
    list-style:none;
        }

#social li{
  text-align:right;
}

#social a{
    padding-right: 5px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    background-color: #202020;
    border-radius: 4px 0 0 4px;
    margin-top:15px;
    -moz-transition: padding-right .3s ease-in;
     -o-transition: padding-right  .3s ease-in;
     -webkit-transition: padding-right  .3s ease-in;
     transition: padding-right  .3s ease-in;
    }

#social a:hover{
    padding-right: 25px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    }

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

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

cssvue.jsvue-componentbootstrap-vuescrollspy

What is the best way to prevent card-group from wrapping on smaller screens?

What is the best way to ensure that cards in a card-group stay adjacent to each other on smaller screens? Currently, they are grouped together on larger screens but appear separated on smaller screens. I am currently hiding the additional cards on smaller ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link re ...

htmlcss

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

htmlcssbutton

Expanding a grid cell beyond 100% can be achieved using a 1

I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...

htmlcsscss-grid

Internet Explorer experiencing difficulties displaying elements

On occasion, my website (find-minecraft-servers.com) may appear distorted in Internet Explorer. Sometimes, the number under Servers Listed in the green-ish banner fails to display correctly, despite being present in the source code. This issue seems to be ...

htmlcssinternet-explorercompatibility

Revamp the design of the Google image layout

I am trying to replicate the layout of a Google search results page. My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image. I attempted to place the img inside another div, ...

javascriptcssvue.js

Adjust the width of the element to match the size of the image within

My webpage features an image along with some accompanying metadata that I want to be centered on the page. I want the div holding the metadata to be the same width as the image. Here's an example: Unfortunately, I am unable to determine the image&apo ...

javascripthtmlcssimage

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

jquerycssfancybox

How to eliminate the bottom border in react-native-material-dropdown

I recently integrated react-native-material-dropdown-v2 into my project using React Native. https://i.sstatic.net/aKVfi.png Is there a way to eliminate the bottom border in this material dropdown component? My React Native version is 0.62.2. ...

cssreactjsreact-native

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

htmlcsstwitter-bootstrapbootstrap-4sass

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Arrangement of Div Box

Here is the HTML code that I am currently working with: <div class="item"> <div class="pageheader"> Header </div> <div class="info"> Created on... </div> <div class="image"> I ...

htmlcssposition

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

javascripthtmlcssangulartypescript

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

javascripthtmlcssnode.jsexpress

CSS background image not displaying in ReactJS with SCSS

Currently, I am working on a React project and I am trying to incorporate a local image from a public folder as the background for a div container with transparent color. However, I am facing an issue where the image is not being displayed. I have success ...

cssreactjssassbackground

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss