Hovering over a disabled Primeng button causes a color change

I have updated the button styles for hover effects.

However, I am facing an issue where the color changes when the button is disabled and hovered over.

<button pButton type="submit" label="Launch @RT" class="ui-button-success color" [disabled]="groupList.length+ejList.length>0 ? false: true"></button>

This is my current CSS:

.ui-button-success.ui-state-disabled, .ui-widget:hover:disabled, .ui-button-success.color{
    background-color: white !important;
    color: #00965E;
}
.ui-button.ui-button-success:hover
{
    background-color: #00965E !important;
    color: white;
}

How can I maintain the button style unchanged when it's disabled and hovered over, but change the color when it's enabled?

htmlcssangularprimeng

Answer №1

Consider utilizing the :not() selector along with the :hover pseudo-class.

.ui-button-success {
  background-color: white;
  color: #00965E;
}

.ui-button-success:not([disabled]):hover {
  background-color: #00965E;
  color: white;
}
<button type="button" class="ui-button-success color" disabled>foobar</button>
<button type="button" class="ui-button-success color">foobar</button>

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

Having issues with jQuery Checkbox Selector and .attr('checked) function not functioning correctly?

I'm trying to assign the value of a variable as true or false based on the selected checkbox. However, the code I have is not working as expected. <input type="checkbox" id="chkBox1"> var chkBox1Val = $('#chkBox1').prop('checked ...

javascriptjqueryhtmlcsscheckbox

If the left margin is equal to a percentage

I am trying to create a unique movement for my div - it should move left five times and then come back. To achieve this, I have the following script: Javascrpit : $(document).ready(function() { if(document.getElementById('twitter').style.marg ...

javascriptjquerycsspercentagemargin-left

Acquire information from a website utilizing an ajax function with VBA in Excel

I'm looking to scrape information from and transfer it into an Excel sheet. The challenge I'm facing is that the webpage utilizes an ajax function and does not have individual elements for each entry. Here's a snippet of the HTML code in qu ...

ajaxexcelvbaextracthtml

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...

javascripthtmlcssdom

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss

Tips for updating the primary color in Bootstrap?

How can I customize the primary color in Bootstrap to align with my brand's color scheme? Specifically, I'm using Bootswatch's Paper theme. ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

issue concerning Angular and Firebase Cloud Messaging

While working on Angular and Firebase Cloud Messaging, I encountered an error after following a specific example closely. Can someone provide assistance with resolving this issue? Here is the link to the example for reference: https://medium.com/@a.adendra ...

angularfirebase

Implement HTML code within WordPress labels

Seeking assistance with customizing certain menu items in a WordPress website. Wondering if it's feasible to include HTML/CSS in the title label? My current situation is as follows: I only want one result to be highlighted in blue. I attempted to ...

phphtmlcsswordpress

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

Animating Lottie as individuals with Ionic/Angular: Is it possible?

Just wanted to clarify before we proceed - I had previously posted a similar question, but it focused on the assumption that the bug stemmed from using a custom component inside an ngFor loop. After realizing this was not the issue, I have removed the orig ...

angularionic-frameworklottie

Looking to minimize the unnecessary spaces within your html tags?

I encountered an issue while creating my custom toast notification in React. There are unnecessary gaps between the elements, causing the size to be larger than intended. React Code import React from 'react' import './CustomToast.css' ...

cssreactjsreact-hooks

The bootstrap mobile menu is stubbornly staying open in my header.html file

I've organized my code with a separate HTML file for the header section. The index file, where I've included all the necessary links to Bootstrap, appears as follows: <head> ... <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1 ...

htmlcssbootstrap-5

What arrangement works best for combining flexbox with images?

I'm finding it challenging to grasp the various image size settings in Flexbox. It seems like every time I try to apply them, I end up with a different outcome. Instead of just saying "it depends on the situation," can someone provide a logical expla ...

htmlcssflexbox

Incorporating Next and Previous navigation buttons to my slideshow

I'm looking to enhance my image slider by including next and previous buttons, but I'm unsure of how to proceed. Can anyone provide guidance or assistance with this? Below is the basic structure that I currently have in place: Here is the code s ...

javascripthtmlcss

Using the <video> element is creating a gap between itself and the element following it

I am facing an issue with a video background on my webpage. The video is perfectly positioned, but it is creating a large gap between itself and the next element. Despite checking for margins or paddings in the inspection tool, I cannot seem to find the so ...

htmlcssangular

Bootstrap not recognizing jQuery despite jQuery being present

I'm currently working on an HTML project that involves using jQuery, Bootstrap, and jQuery easing. However, I've encountered some errors while testing the code: bootstrap.min.js:6 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. ...

javascripthtmljquerybootstrap-4

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

javascripthtmlcss

The comparison of Booleans in Typescript sometimes produces inaccurate results

There is a strange issue I encountered in one of my classes involving a readonly boolean property. Whenever I try to check this property, the results are not as expected. Here is an example of the code: // vorgang is a reference to the class, isEK is the ...

angulartypescript

Localization of labels and buttons in Angular Owl Date Time Picker is not supported

When using the Owl Date Time Picker, I noticed that the From and To labels, as well as the Set and Cancel buttons are not being localized. Here is the code snippet I am using to specify the locale: constructor( private dateTimeAdapter: DateTimeAdapter&l ...

javascriptangulartypescriptangular6