What is the purpose of a single-row border with a top and bottom border that

Just to let you know, I'm new here so please be patient with me ;)

I'm having an issue styling my foreach loop. My goal is to have a single line border appear at the top and bottom of each row when hovered over. However, the problem is that when I hover over the next row, it also shows the borders from the previous rows, creating a 2px border effect. I've tried various solutions like adjusting the margin with no success.

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

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

.frameregels{
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;       
}
.frameregels:nth-child(odd){
background-color:#FFFFFF;
}
.frameregels:nth-child(even){
background-color:#f9f9f9;       
}
.frameregels:hover{
background-color:#ecf5f9;
border-color:#66afe9;
}

<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>
<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>
<div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns frameregels">
<div class="xxlarge-1 xlarge-1 large-2 columns large-down-hidden">[artikelnr]</div>
<div class="xxlarge-11 xlarge-11 large-10 columns large-down-hidden">[omschrijving]</div>
</div>

Answer №1

margin-bottom:-1px is the correct approach, but there are additional steps required for it to be effective:

  • Ensure that you do not apply it to the last element in order to maintain a clean bounding box for your list
  • Position the elements in a way that allows for a z-index property so that you can bring the hovered element to the front. Failing to do this will result in the color of your border changing without affecting the next element's border placement.

Here is how it looks in practice (padding added for visual appeal):

.frameregels {
  border-bottom: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  padding: 5px 0;
  position: relative;
  z-index: 0;
}
.frameregels:not(:last-child) {
  margin-bottom: -1px;
}
.frameregels:nth-child(odd) {
  background-color: #ffffff;
}
.frameregels:nth-child(even) {
  background-color: #f9f9f9;
}
.frameregels:hover {
  background-color: #ecf5f9;
  border-color: #66afe9;
  z-index: 1;
}
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>
<div class="frameregels">
  <div>[artikelnr]</div>
  <div>[omschrijving]</div>
</div>

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

Challenges with Nginx URL redirection

When a page request is made, it goes through the "check.php" process: rewrite ^/(.*)$ http://localhost/check.php?page=$1 The "check.php" file carries out security checks before loading the requested page: <?php // ... security measures requi ...

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

Is there a way to showcase the information from an xml file within html divs using an ajax request?

I am currently developing an online platform for managing contacts, and I am looking for a way to showcase contacts stored in an XML file within HTML div elements using only an AJAX call. The structure of my XML file is as follows, and I aim to create se ...

The child's size exceeds the parent's dimensions due to its padding

I am facing difficulty in making the size of my <a> tag match the parent div (#logo) without exceeding its boundaries. HTML <div id="header"> <div id="logo"> <a href="#"></a> </div> <div class="h ...

Display only the labels of percentages that exceed 5% on the pie chart using Chart JS

I'm currently diving into web development along with learning Chart.js and pie charts. In my project, the pie chart I've created displays smaller percentage values that are hardly visible, resulting in a poor user experience on our website. How c ...

Adjusting the dimensions of images by using the percentage width and height relative to the body

On my website, I am displaying two images that are hosted on another company's server. To ensure these images adjust with the size of the browser window, I have set their width and height as a percentage relative to the body. However, the issue arise ...

I am encountering an issue with my register button not being able to submit in PHP+AJAX, while the

Having trouble with the registration page in PHP and AJAX. The login section works fine as I can sign in, but the registration button appears disabled or inactive, preventing form submission. I suspect an error somewhere, but unable to pinpoint it. Login ...

Using PHP to generate a table populated with generic elements from an array

How can I create a dynamic table in PHP that can handle any generic array with different keys and values, including nested arrays? I want to use the same table structure for various arrays regardless of their content. Any advice on achieving this flexibili ...

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

Tips for enhancing contrast in MUI dark theme modals

Currently, I am implementing MUI dark mode for my Next.js application. While the MUI modal functions perfectly in light mode, I am struggling with visibility issues when using it in dark mode. The contrast is not strong enough, making it difficult to disti ...

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

An issue with Safari rendering when using border radius with varying border width and color

I am looking to create a unique box design that features borders on the left and right sides with rounded corners. I also want to have different colors for each border. When viewing the box in Chrome, the corners appear correctly except for some thin whit ...

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

Set the button to align on the left side within a Bootstrap card

Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion. Check out the demo site here. For viewports >768px, the button ...

``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

I am currently working with VueJS + NuxtJS and have implemented a background gif. Right now, the code looks like this: body { margin: 0 auto; background: url("assets/video/background-darked.gif") no-repeat center center fixed; -webkit-backg ...

Is it possible to modify a Facebook post in editing mode using JavaScript?

I am trying to edit the content of a Facebook post dynamically using JavaScript. https://i.sstatic.net/pyO9h.png My goal is to be able to select the text in edit mode and make changes to it programmatically. The structure of the HTML code for a Facebook ...

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

Ways to change specific CSS class properties in a unique style

As a Java programmer using primefaces 5.1, I've encountered some challenges with handling CSS classes. One particular issue I'm facing is the need to override certain CSS properties to remove the rounded corners of a DIV element. The rendered cod ...

Is the user currently viewing this page?

My website, www.mysite.com, has a basic login system using PHP and MYSQL. With the $_SESSION['user_id'] in place, I am wondering if there is a way to determine if a user currently has the page www.mysite.com/test.php open. Is it possible to acco ...