Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :hover in Google Chrome's Dev Tools, the border fails to appear. Can anyone explain why this is happening?

Check out the code here

<div class="container">
  <div class="shadow-sm card my-5">
    <div class="list-group list-group-flush">
      <div class="text-center list-group-item">
        <h1 class="text-left d-inline-block mb-0">
          Submit
          <small class="text-muted">Create your ad in less than 1 minute</small>
        </h1>
      </div>
      <form action="/submit" method="POST" class="mb-0">
        <div class="form-group list-group-item">
          <label for="site">Site</label>
          <div class="input-group" id="site-menu">
            <select class="form-control text-center" name="site" id="site" required>
            </select>
            <div class="btn-group-toggle input-group-append" data-toggle="buttons">
              <label class="btn btn-outline-primary">
                <input type="checkbox" name="meta" value='checked'> Meta
              </label>
            </div>
          </div>
        </div>
        <div class="form-group list-group-item">
          <label for="post-id">Post ID</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">#</span>
            </div>
            <input class="form-control text-center" type="number" min="1" step="1" name="id" id="post-id" required>
          </div>
        </div>
        <div class="form-group text-center list-group-item">
          <input class="btn btn-primary btn-lg" type="submit" value="Proceed">
        </div>
      </form>
    </div>
  </div>
</div>

Answer №1

The element has a hidden border:

.list-group-item {
    position: relative;
    margin-bottom: -1px;
    border: 1px solid rgba(0,0,0,.125);
 }

Initially, the border is not visible because of the negative margin causing the next element to move up (by 1px) and overlap it.

By adding this code...

.list-group-item:hover {
  z-index: 1;
}

...a new stacking context is created, bringing the border forward and making it visible.

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

When hovering over the element, child elements remain unaffected by the wrapping behavior

My anchor tag contains a span and an image, but I am having trouble making them hover together. <a href=""> <img src="image"/> <span>Shopping Cart</span> </a> a :hover { opacity: 0.6; } Check out the fiddle ...

What is the reason behind loading two srcset images?

When it comes to creating responsive web templates, I make use of the srcset attribute in order to load different images based on the current viewport size. This has been working well overall. However, in production mode, the images are fetched from a Digi ...

Challenges encountered with Material-UI elements

Attempting to implement the http://www.material-ui.com/#/components/drawer (Docked Example) component from Material-UI in conjunction with ReactJS. An error is encountered with the "=" sign in this line: handleToggle = () => this.setState({open: !this ...

Incorporate _verify-increasing($grid-breakpoints, "$grid-breakpoints")

** Bootstrap v5.0.0-beta1** I am looking to modify breakpoints: Files: https://pastebin.com/WZcb70YE custom.scss @import "bootstrap-5.0.0-beta1/scss/variables"; $grid-breakpoints: ( xxs: 0, xs: 375px, sm: 576px, md: 768px, lg: 992px ...

If the option is not chosen, remove the requirement for it

I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

Hovering over an image with CSS for a cool effect - altering the background and text

I'm experimenting with creating a mouseover effect on images where the background becomes dimmer and text appears on top. For example, you can take a look at this page and scroll down to see how the second set of images darken and display text when y ...

JavaScript event listener 'click' not functioning properly

I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...

Steps for setting the value of a textbox within a bootstrap popover

When a user clicks on an Anchor element, I am displaying a Bootstrap popover using the following JQuery code. Jquery $("[data-toggle=popover]").popover({ trigger: 'click', placement: "top", html: true, ...

Incorrect display of French characters in emails

Issues arise when sending emails with French characters, as they are not displaying correctly in the mail body. I made sure to include the following code in my HTML page: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Despit ...

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

My HTML page contains the following codes: <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/> <input type="button" class="sin ...

Exploring the world of child theme customization in WordPress

I am looking to make some modifications to my website. Working with a child theme, I have plans to adjust the CSS and make some structural changes. Modifying the CSS seems pretty straightforward as I just need to reference the classes or IDs and input new ...

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...

What are the best practices for utilizing intro.js effectively on mobile devices?

Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the too ...

Having difficulty displaying data in the proper format with two-way binding

In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...

"Add a new style sheet to the homepage of your WordPress site using the

I have been attempting to utilize a separate style sheet in order to customize the front page of my wordpress website. Despite several attempts, I have not had any success. Below is the current code that I am working with: add_action('wp_enqueue_styl ...

What are the steps to include media queries?

My website looks good on big monitors, but not on smaller ones or on mobile phones. I need help with adding media queries to my CSS Reset so it works across all devices. Here's the website link and the CSS Reset code: html, body, div, span, applet, o ...

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...