Tips for removing the default hover and click effects from a Material-UI CardActionArea

Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative to the mouse pointer. Now I have two questions: 1- How can I customize the click effect color? For example, I want the photo to turn red (change hue) when clicked by the user. 2- I've added my own hover effect that slightly lifts the card when hovered (see codes below). How do I disable the default hover effect that alters the picture's color?

const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        '&:hover': {
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});
javascriptcssreactjsmaterial-ui

Answer №1

If you want to prevent default hover effects and disable onClick events, you can achieve this by disabling pointer-events:

const customStyles = makeStyles({
    main: {
        width: 345,
        margin: 5,
        '&:hover': {
            pointerEvents: 'none',
            transform: 'translateY(-5px) !important'
        },
    },
    imageContainer: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Answer №2

const {
  Box,
  ButtonGroup,
  Container,
  Typography,
  makeStyles
} = MaterialDesign;

const useStyles = makeStyles((theme) => ({
  main: {
    maxWidth: 345,
    transition: theme.transitions.create("transform", {
      easing: theme.transitions.easing.easeInOut,
      duration: theme.transitions.duration.standard
    }),
    "&:hover": {
      transform: "translateY(-5px)"
    }
  },
  focusStyle: {
    "&&&": {
      opacity: 0
    }
  },
  rippleEffect: {
    color: "blue"
  }
}));

function DisplayCard() {
  const classes = useStyles();

  return (
    <Box className={classes.main}>
      <ButtonGroup
        classes={{ focusStyle: classes.focus }}
        RippleProps={{ className: classes.rippleEffect }}
      >
        <Container>
          <Typography variant="h6" component="h2">
            Example Card
          </Typography>
          <Typography variant="body1" color="textSecondary" component="p">
            This is just a sample card for demonstration purposes
          </Typography>
        </Container>
      </ButtonGroup>
    </Box>
  );
}

ReactDOM.render(<DisplayCard />, document.getElementById('main'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-design/core@latest/umd/material-design.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="main"></div>

Answer №3

How to remove the default hover and click effects of material-ui CardActionArea

One way to disable the default hover and click effects from CardActionArea is by creating a styled component:

const styledcardactionarea = styled(CardActionArea)(({theme}) => `
    .muicardactionarea-focushighlight {
        background: transparent;
    }
`);

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

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

How can I move the scrollbar to the left while keeping ng-repeat population from left to right? I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the ...

htmlcssangularjscss-gridgrid-layout

Positioning Tumblr blockquotes beneath each other, rather than within

Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line li ...

htmlcsstumblr

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

javascripthtmlcss

Convert the data received from jQuery $.parseJSON into HTML code

I am using $.parseJSON to retrieve data from a specific URL. The link I receive contains {"status":"ok", "message":'<form><input type="text" name="" value=""> </form>'} Now, I want to add the "message" part to my content. $. ...

javascriptjqueryjson

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

javascriptangulartypescriptangular7

HTML div ID displaying incorrectly

My main div on the page has the attribute align="center", but it does not seem to align in the center. If you'd like to see the page for reference, click here. This is the CSS: #page{ background-color: #4C1B1B; width:85%; height:500px; ...

csshtmlalignment

What is the process for incorporating a scrolling feature into my HTML page?

I need to display the following content on my website: What code do I need to add in order to achieve this? I tried using the code snippet below but it did not work as expected: <td nowrap align="left" style="word-wrap: break-word"><pre style="w ...

htmlcss

Generating duplicate uuidv4 key values within a Sequelize model

Hello, I'm new to TypeScript and Express. I've set up a UUID type attribute but it always returns the same value. 'use strict'; const { v4: uuidv4 } = require('uuid'); const { Model, Sequelize } = require('sequelize&apo ...

javascriptnode.jsexpresssequelize.jsuuid

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

Error in Vue.js: Trying to access properties of an undefined object

My understanding of vue.js is limited, but based on what I know, this code should work. However, when attempting to access the variable in the data property, it seems unable to locate it. data: function() { return { id: 0, clients: [] ...

javascriptvue.js

Calculating the total sum of values using a dropdown list as a filter with J

I have successfully implemented a dropdown filter in my jQuery datatable to filter data. However, I am now looking to calculate the sum of all values in the filtered table each time a user selects a value from the dropdown list. How can I achieve this? My ...

javascriptjqueryhtmldatatableshtml-select

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap

Retrieving information within the iteration

I am facing an issue with connecting to an external server named Pexels in order to retrieve photos from node.js. The problem seems to be related to JavaScript, as Pexels limits the user to download up to 40 pictures per page. https://api.pexels.com/v1/cu ...

javascriptnode.jsreactjs

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

htmlcssreactjsoverlay

A step-by-step guide on configuring data for aria's autocomplete feature

Currently, I am implementing aria autocomplete and facing an issue while trying to populate data from the server into the selection of aria autocomplete. I have tried setting the selected property of the aria autocomplete object, but it doesn't seem t ...

javascriptphpjsontypescriptselect

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

c#cssasp.netasp.net-mvc

What is the method for assigning a value to a variable in xhr.setRequestHeader?

I'm working on setting a value to the variable in xhr.setRequestHeader(Authentication, "Bearer" + parameter); with xmlhttprequest. Can you provide guidance on how to effectively pass a value to the variable within xhr.setRequestHeader? ...

javascriptxmlhttprequest

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

javascripthtml

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3