The background color of social media links spills over onto other links, creating a messy overlap

I have been trying to confine the teal hover effect within the boundaries of my social media links. Despite adjusting padding, heights, and widths using CSS properties, the hover effect still extends beyond the right border.

Here is how it appears without hovering:

https://i.sstatic.net/tnQNV.png

This is the appearance when hovering:

https://i.sstatic.net/uOBXi.png

The dimensions of each image are 19px × 15px.

#box {
  width: 200px;
  height: 50px;
  background-clip: padding-box;
  position: relative;
  margin: 0;
  left: 1.4em;
  background: rgba(0, 0, 0, 1);
  float: right;
  z-index: 200;
}

#boxlist li {
  height: 50px;
  width: 20px;
  position: relative;
  list-style-type: none;
  display: inline-block;
  bottom: 1em;
  margin-left: -2.5em;
  float: left;
}

.imgli:hover {
  background: rgba(0, 255, 255, 1);
}

.imgli {
  border-left: 1px solid rgba(153, 153, 153, 1);
  padding-right: 4em;
}

.imgli:first-child {
  left: -0.1em;
  border: none;
}

.imgli:nth-child(2) {
  left: 1em;
}

.imgli:nth-child(3) {
  left: 2em;
}
<header>
  <div id="box">
    <ul id="boxlist">
      <li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
    </ul>
  </div>
</header>

htmlcss

Answer №1

It appears that the overlapping issue is due to the combination of margin-left: -2.5em and the fixed width of the container, resulting in elements floating over each other. To solve this problem without analyzing your layout extensively, one solution is to add a background color to your <li> elements to prevent overlap. Check out the updated fiddle I created with this change: http://jsfiddle.net/VVj3R/1/

I simply added a background color line to the definition of .imgli, and it seemed to resolve the issue.

.imgli {
    border-left: 1px solid rgba(153,153,153,1);
    padding-right:4em;
    background-color:black;
}

You can choose a different opaque color instead of black if you prefer.

Also, please note that the images did not display in your fiddle due to your use of relative path names.

Answer №2

Consider simplifying your code with the following structure:

<div id="container">
  <ul>
    <li><div class="btn" id="btn1"></div></li>
    <li><div class="btn" id="btn2"></div></li>
    <li><div class="btn" id="btn3"></div></li>
  </ul>
</div>

CSS Styles:

#container ul {
  margin: 20px;
  padding: 0px;  
}

#container li {
  float: left;
  display: block;
  background: #ededed;
  padding: 1px;  
}

#container .btn {
  width: 50px;
  height: 50px; 
  background-color: #000;  
}

#container .btn:hover {
  background-color:rgba(0,255,255,1);  
}

#btn1 {
  background-image: url(someicon.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;  
}

View the live example on a fiddle: http://jsfiddle.net/tb2Ug/

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

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

javascripthtmlmaterialize

Struggling to retrieve Codemirror textarea values across multiple elements with JavaScript/jQuery

I've been struggling to retrieve the values from my textarea codemirror in order to send them as JSON to the server for saving after editing. Unfortunately, I am unable to select the ELEMENT...I even attempted to grab the element by its id...with no s ...

javascriptjqueryhtmlcodemirror

The Twitter quote button refuses to function properly if there happens to be a pesky semicolon present in the quote

I have been working on setting up a Twitter share quote button, and have successfully done so with my other quotes. However, I am facing an issue with a quote that includes a semicolon. <a href="http://twitter.com/home/?status=Don\'t talk a ...

htmltwitter

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

htmljsonangulartypescriptapi

Is it better to use enum rather than ul for inline lists within paragraphs in HTML5?

Reflecting on the passage below: So in the initial group, we merge these 3 codes: - AA - BB - CC with the following codes: - Aa - Ab - Ac to achieve the desired outcome. Is this paragraph semantically incorrect? If not, how should it be written in H ...

htmlsemantic-markup

Requesting an API token through the body using Javascript's Fetch function

I'm currently working on developing a frontend application using Javascript Fetch to interact with an API service. One of the tasks I need to accomplish is to create a token by using the POST method and sending an apiKey parameter in the Body. Once I ...

javascripthtmlvisual-studioapi

Navigating the art of employing different fonts for a website

I am looking to incorporate the trainway font into my website, but I'm concerned that the user may not have it installed on their device. Is there a way to showcase text in a specific font without requiring the user to download and install it? Thank ...

javascripthtmlcss

Activate a .click() event on a hyperlink exclusively in mobile view

Currently, I am working on a WordPress website that utilizes a Table of Contents plugin. The plugin simply identifies headings and adds them to the table of contents. I am aiming to achieve a specific functionality on my website (). When the window width ...

javascripthtmlcss

How can I utilize JavaScript to seamlessly loop through and display these three images in succession?

My current code is HTML, CSS, and JS-based. I am looking to design three of these div elements that appear and hide in a loop every 3-5 seconds. After the first run, I want the execution to repeat continuously. How can I modify my code to achieve this func ...

javascripthtmljquerycssloops

Restrict the display of items in a unordered list element

Below is my code snippet that limits the number of visible list items in a ul: $wnd.$(el) .find('li:gt(9)') .hide() .end() .append( $wnd.$('<li>+More</li>').click( function(){ $wnd.$(this).nextAl ...

javascriptjqueryhtml

Identifying the Nearest Div Id to the Clicked Element

When a link is clicked, I am trying to locate the nearest div element that has an id. In this specific scenario, the target divs would be either #Inputs or #Stages. For example, if Page1 through 4 is clicked, I want to store the id #Inputs in a variable. ...

javascriptjqueryhtml

Explanation: The information box does not appear when the mouse hovers over it

Welcome to the gallery showcasing a unique calendar design with tooltip functionality. This calendar features a special hover effect for New Year's Day on January 1st, displaying a tooltip text upon interaction. Feel free to explore the code below to ...

htmlcsshovertooltip

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

What process allows for this Twitter API response to be converted into HTML format automatically?

It is common knowledge that Twitter operates in an API-centric manner, meaning all Twitter apps retrieve their data through the API. Upon accessing (or .xml for those who prefer), a JSON formatted result with plaintext content and no additional formattin ...

htmlxmljsonapitwitter

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is ...

javascriptcssreactjspositionoverflow

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

javascripthtmljquerycss

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement) import Butto ...

cssreactjstypescriptreact-grid-layout

Using JQUERY to fadeIn elements when clicking on a button and loading content from an external HTML

On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...

jqueryhtmlcss

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml