Disable list-group-item-action clicking

I'm looking to maintain the list-group-item-action hover effect that changes the background color while eliminating the click effect that activates it. Is there a way to achieve this?

I've already removed the href="#" from the If I remove list-group-item-action class, the hover effect disappears

I'm hesitant to specify a hover color in CSS because Bootstrap list groups automatically adjust hover colors in light and dark mode. Additionally, I'm unsure of the exact hover colors in light and dark modes. Can someone help with this?

const test_list_items = document.querySelectorAll('.test_list_item');

    test_list_items.forEach(element => {
        element.addEventListener('mouseover', () => {
            let previous_item = document.querySelector('.test_list_item.selected');
            let current_item = element;

            let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
            let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

            if (previous_item && previous_item.id !== current_item.id) {
                let selected_item = current_item.id;
                console.log(selected_item);
                console.log(`previous image: ${previous_image.id}`);
                console.log(`previous image: ${current_image.id}`);

                previous_item.classList.remove('selected');
                current_item.classList.add('selected');

                // previous_image.style.opacity = 0;
                previous_image.classList.remove('d-md-block');
                // current_image.style.opacity = 1;
                current_image.classList.add('d-md-block');
            }
        });
    });
.test_image .d-md-block {
        /* position:absolute; */
        /* opacity:1; */
        /* transition: opacity 0.5s linear; */
        transition-timing-function: opacity 3s ease-in;
    }
...
        more code snippets here
        ...
    

Answer №1

I'd like to maintain the list-group-item-action hover effect where the background changes, but I want to eliminate the click effect that activates it.

If you desire:

  • to retain the hover effect
  • to make the click effect identical to the hover effect

Simply include the following CSS:

.list-group-item:active {
  color: var(--bs-list-group-action-hover-color) !important;
  background-color: var(--bs-list-group-action-hover-bg) !important;
}

I would prefer not to specify a hover color in CSS since Bootstrap list groups automatically adjust hover colors in light/dark modes.

If you prefer:

  • to completely remove the hover and click effects

Just add the following CSS:

.list-group-item-action:active,
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: unset !important;
  background-color: unset !important;
}

To identify the CSS specified in those :active, :focus, :hover selectors, for example in Chrome, open the browser debugger, select the element you want to inspect, and locate the relevant CSS properties by toggling selectors.

Refer to the provided code snippets for further details and implementation. Hope this helps!

Answer №2

Here's a simple way to override the :focus and :active CSS--

.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}

const test_list_items = document.querySelectorAll('.test_list_item');

test_list_items.forEach(element => {
    element.addEventListener('mouseover', () => {
        let previous_item = document.querySelector('.test_list_item.selected');
        let current_item = element;

        let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
        let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);

        if (previous_item && previous_item.id !== current_item.id) {
            let selected_item = current_item.id;
            console.log(selected_item);
            console.log(`previous image: ${previous_image.id}`);
            console.log(`previous image: ${current_image.id}`);

            previous_item.classList.remove('selected');
            current_item.classList.add('selected');

            // previous_image.style.opacity = 0;
            previous_image.classList.remove('d-md-block');
            // current_image.style.opacity = 1;
            current_image.classList.add('d-md-block');
        }
    });
});
.test_image .d-md-block {
    /* position:absolute; */
    /* opacity:1; */
    /* transition: opacity 0.5s linear; */
    transition-timing-function: opacity 3s ease-in;
}
.list-group-item-action:focus , .list-group-item-action:active{background:transparent !important}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7cad7c9d49895899198c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffa2e6ece0e1fccfbea1bebfa1bc">[email protected]</a>/font/bootstrap-icons.css">

<section class="p-5">
    <div class="container">
        <h2 class="text-center display-5 fw-bold">test</h2>
        <p class="lead text-center mb-5">
          esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
        </p>

        <div class="row g-4 justify-content-between">
            <div class="col-md">
   ... [content shortened for brevity] ...    
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435e435d400c011d050c5c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='script/index.js') }}"></script>

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

event fails to trigger on a fixed positioned element

Here's the code snippet I've been working with: if ($('body.page-service-map').length || $('body.page-contact').length) { $(document.body).append('<div class="black-overlay"></div>'); ...

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

Learn how to trigger an HTTP exception after a failed command in a saga with NestJS CQRS

Currently utilizing the NestJS CQRS pattern to handle interactions between User and UserProfile entities within my system. The setup consists of an API Gateway NestJS server along with dedicated NestJS servers for each microservice (User, UserProfile, etc. ...

Convert an array into a JSON object for an API by serializing it

Currently, I am working with Angular 12 within my TS file and have encountered an array response from a file upload that looks like this- [ { "id": "7", "name": "xyz", "job": "doctor" ...

Obtaining a byte array using the file input method

var profileImage = fileInputInByteArray; $.ajax({ url: 'abc.com/', type: 'POST', dataType: 'json', data: { // Other data ProfileImage: profileimage // Other data }, success: { } }) // Code in Web ...

Parsing JSON data in array format sent from jQuery and processed by Node.js

I'm currently experimenting with Node Js and working on an app for learning purposes. In this app, I aim to send data from an HTML form using jQuery/AJAX and have Node Js/Express handle and process the data. Here is the HTML code containing a series ...

md- The datePicker component consistently encounters errors with Date instances

I encountered an issue where the error message The ng-model for md-datepicker must be a Date instance. Currently the model is a: string appeared. I am utilizing moment.js library to handle dates. Within the view section: <md-datepicker ng-model="Model ...

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

Show the dropdown menu with names from the array in the ajax response

<html> <select name="cars"> <option value="34">Volvo XC90</option> <option value="54">Saab 95</option> <option value="12">Mercedes SLK</option> <option value="10">Audi TT</option> </select> ...

Getting information from HTML using BeautifulSoup

Embarking on my python learning journey, I am eager to utilize BeautifulSoup for extracting elements from the provided HTML structure. This HTML snippet is sourced from a voice recording system that documents data such as the local time, UTC, call duratio ...

Error when accessing JSON property in Angular with Ionic 2: A Strange TypeError

I have implemented a provider in my Ionic project to fetch the user object from storage. Below is the code: import { Injectable } from '@angular/core'; import { Storage } from '@ionic/storage'; @Injectable() export class ApiProvider { ...

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

Nested loops combined with a timeout occasionally results in failure

I encountered a problem with the loops and timeouts in my script that I created for practice. If you want to take a look at the script, you can find it here: http://codepen.io/JulienBarreira/pen/EWNoxJ When running the script, I noticed that sometimes one ...

The operation of "grunt build" results in a Lexer Error, causing the ng-include

After deploying my unminified code successfully, I proceed to run grunt build and deploy from the dist folder. However, upon checking one of the pages, I encounter a breakage with an error in the console: Error: [$parse:lexerr] Lexer Error: Unexpected nex ...

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

What is the best way to filter out specific data fields from console.log in JavaScript?

When working with Java, I often use lombok to exclude certain fields from being printed. For instance, the @ToString.Exclude annotation can be used to prevent printing the user token. import lombok.ToString; public class TokenResponse { @ToString.Excl ...

"Guidelines for implementing a post-login redirection to the homepage in React with the latest version of react-router (v

I am facing an issue where I am unable to redirect to the Home Page when I click the "Login" button during my React studies. Despite trying all possible methods for redirects, none of them seem to work. The function that is executed when I click the "logi ...

Encountering an unexpected token error in Vercel during deployment, even though the code runs smoothly in the

I'm facing an issue with a SyntaxError: Unexpected token '??='. I am not sure how to resolve it, so any help would be greatly appreciated. Thank you in advance. SyntaxError: Unexpected token '??=' at wrapSafe (internal/modules ...

Troubleshooting: xPages radio button group onchange event malfunctioning

I have created a simple page with a listbox control that should update its values based on the selection made in a radiobutton group. The listbox is connected to a scope variable array as its data source. However, I am experiencing an issue where the lis ...

Infinite dice roller for a six-sided die

Looking for assistance with a School JavaScript assignment focusing on creating a 6-sided dice roller program? Need some guidance on how to approach this task? The program should allow users to choose how many dices to roll, ranging from 1 to 5. The sum o ...