An effective way to emphasize the full area of a list item when hovering over it

Is there a way to modify the hover behavior of a list item in Fiddle? I'd like the black highlight to cover the entire area of the list item, without leaving any white space on top or bottom. Currently, it only covers the center area of the list item.

I attempted to adjust the padding on the ul and set a specific height for the li elements, but it didn't produce the desired effect. How can I achieve this?

ul {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
  height: 50px;
}
htmlcsslist

Answer №1

Instead of applying hover effects to the <a> tag, try adding them to the <li> element. Take a look at this fiddle for reference: https://jsfiddle.net/22upj1yc/1/

ul li:hover {
  background-color: black;
}

Answer №2

Your item has been successfully updated. Take a look at the changes I made in this jsfiddle link.

Instead of styling just ul { }, I have modified it to ul li { }.

CODE

body {
  font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif;
  background: #f5f5f5;
}

ul li {
  display: inline-block;
  list-style: none;
  padding: 10px;
  margin: auto;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
}

ul li a {
  color: #777;
  text-decoration: none;
  padding: 0 12px;
}

ul li:hover {
  background-color: black;
}

ul li.next {
  border-right: 0;
}

ul li.next:after {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 12px;
  padding: 0 10px;
}
<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>
  <li><a href="#">5</a></li>
  <li class="next">
    <a href="#">Next</a>
  </li>
</ul>

Answer №3

Eliminate top and bottom padding from the unordered list

ul {
display: inline-block;
list-style: none;
padding:  0 10px;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}

Add padding to list items

ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
padding:10px 0px;
}

View the code on jsfiddle: https://jsfiddle.net/22upj1yc/6/

!--Apologies for any language errors--!

Answer №4

After each inline-block element, there seems to be a 4px space added (although this may vary by browser). To counteract this, you can use font-size: 0 on the element and apply the font size directly to the li or a tags.

Styling with CSS:

body {
  background: #f5f5f5;
  // removed font sizing, replaced in ul li below
}

ul {
  display: inline-block;
  font-size: 0; // eliminate space after inline-blocks
  list-style-type: none;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
  margin: 0; padding: 0;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
  text-align: center;
  margin: 0;
  padding: 0px 6px; // added left/right padding
  font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif; // set font sizing here
}

...there may have been other padding issues, so I reset everything else to 0.

Check out the fiddle:

https://jsfiddle.net/Hastig/3ezn15a0/1/

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

Generate visual representations of data sorted by category using AngularJS components

I am facing an unusual issue with Highcharts and Angularjs 1.6 integration. I have implemented components to display graphs based on the chart type. Below is an example of the JSON data structure: "Widgets":[ { "Id":1, "description":"Tes ...

javascripthtmlangularjsjsonhighcharts

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

htmlcss

Effectively evaluating lists with randomly-assigned labels

Two sets of item labels, obtained from clustering, represent the same items but are assigned different arbitrary labels. Here's an example: labels1 = [1, 1, 2, 2, 3, 3, 3, 1, 1] labels2 = [0, 0, 1, 1, 4, 4, 4, 0, 0] Both lists have a similar structu ...

pythonalgorithmlistcomparison

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

javascriptjqueryhtmlcssajax

Transferring JavaScript to a different page using EJS

Feeling a little stuck here and could use some assistance. It seems like a simple issue, but I'm tired and could really use a fresh pair of eyes to take a look. I'm trying to pass the 'username' variable, but since I'm new to this ...

javascripthtmlnode.jsobjectejs

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

What strategies should be considered for styling AngularJS components?

Currently, I am engaged in a project using AngularJS with the intention of gradually organizing things for Angular 6 or whichever version is available when we begin the upgrade process. A significant part of this endeavor involves converting existing direc ...

cssangularjscomponents

Bootstrap datepicker embedded within a modal will scroll along with the parent page, rather than the modal itself

I recently encountered an issue with a bootstrap template where I needed to incorporate a datepicker within a modal. The modal contains scrollable content, but when I clicked on the datepicker field and scrolled the page, the datepicker moved with the pa ...

twitter-bootstrapcssbootstrap-modalbootstrap-datepicker

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

Request to Create Centered Date Element with Line Borders I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side. Ideal Design I Want to Achieve: My Current Approach a ...

htmlcss

"What is the process for creating a single line border around a pandas DataFrame using df.to_html method

After exporting a pandas dataframe as an HTML table to Outlook, I noticed that the double cell borders are not aesthetically pleasing. I am seeking assistance in changing them to a single line border. Please refer to the attached screenshot and code snip ...

pythonhtmlpython-3.xpandas

Show validation error messages for radio buttons alongside images in a single row

Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...

htmlcssbootstrap-4

Assigning a height of 100% to a div element results in the appearance of

In a div within the body, there are only 3 lines of text. The background color was only filling up to those 3 lines of text. To make the color fill up the entire vertical space of the browser, I adjusted the CSS height properties of html & body to be ...

htmlcss

Jquery's intermittent firing of .ajax within if statement

So, I've inherited a rather messy codebase that I need to modernize. The task involves upgrading from an old version of prototype to the latest jQuery 3.2.1 within a dated website built on php and smarty templates (not exactly my favorite). When a lo ...

javascriptphpjqueryhtmlajax

The media query will only impact elements and classes within the index.html file, and will not apply to any other

As I strive to optimize my website for mobile devices, I am encountering an issue with my media queries. The classes don't seem to respond appropriately on any page other than the index.html, and I'm struggling to identify the root cause. Index. ...

htmlcssroutesmedia-queriesmeta-tags

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

javascriptcsslightboxtransition

Customize your Jquery UI Calendar with Changing Background Images for Each Month!

How can I change the background of jQuery UI datepicker based on the selected month? I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ...

javascriptjqueryhtmlcssjquery-ui-datepicker

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

Incorporate Arabic typography into the React Material Theme

My goal is to utilize the Noto Sans Arabic font within my React material UI theme. Everything seems to be functioning correctly, including overrides. Despite consulting the React Material UI documentation and attempting to follow similar steps as outlined ...

htmlcssreactjsmaterial-ui

Eliminating blank spaces below or above images when displayed horizontally

Displayed below is the image depicting my problem: I have discovered a cumbersome method to eliminate this unwanted whitespace by treating it as four separate lists and utilizing a complex for-loop to add elements. However, this approach limits the number ...

htmlcssimagelistwhitespace

I'm looking for expert tips on creating a killer WordPress theme design. Any suggestions on the best

Currently in the process of creating a custom Wordpress theme and seeking guidance on implementation. You can view the design outline here. Planning to utilize 960.gs for the css layout. My main concern is how to approach the services section (1, 2, 3...) ...

phpcsswordpress