How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover.

   card: {
    maxWidth: 350,
   height: 300,
   '&:hover': {
   backgroundColor: '#373737 !important', 
     },
      
  },

// This is the card component where the above CSS is being applied

<Card
            className={classes.card}
            style={{
              margin: 'auto',
              backgroundColor: '#F3FEEF',
              borderRadius: '16px',
            }}
          >
            <Box my={2} />
           
            <CardActionArea className={classes.MuiCardActionArea}>
              <CardContent>
                <div className={classes.hovers}>
                  <Typography
                    gutterBottom
                    variant='h5'
                    direction='row'
                    color='textPrimary'
                    align='left'
                    underline='hover'
                  >
                    {aboutTitle}
                  </Typography>

                </div>
              </CardContent>
            </CardActionArea>
          </Card>
cssmaterial-uicard

Answer №1

Here is the solution to your query.

To change the text in the card class upon hovering, you need to add :hover and specify the element you want to modify. In this example, it's h2.

Check out this code snippet for reference

<div class="container">
  <h1>Card colour change on hover</h1>
<div class="row">
  
<div class="card">
  <h2>card title</h2>
  <p>some card text</p>
  <img src="https://source.unsplash.com/WLUHO9A_xik/600x600
">
  <a href="#" class="button"> card link </a>
</div>
</div>
</div>

.container{
  width:900px;
}
.row{
  display:flex;
  flex-direction:row;
}
h1{
  width:100%;
}
.card{
  width:24%;
  background-color:yellow;
  padding:20px;
  display:flex;
  flex-direction:column;
}
.card img{
  width:100%;
}
.button{
  padding:10px;
  link-style:none;
  border:1px solid grey;
  background-color:white;
}
.card:hover{
  background-color:green;
/* general background colour change on the card */
    }
    .card:hover h2{
      color:pink;
/* this is what causes the colour change when you hover on the card */
    }

Answer №2

style: {
   maxWidth: 350,
   height: 300,  
  },
 style:hover h2 {
   color: blue;
  }

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

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material

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

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a transition effect. Can someone help? ...

javascriptjquerycsscss-transitions

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

htmlcssfirefoxgoogle-chrome

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

javascriptjqueryhtmlcssvue.js

Tips for creating a centered Reindeer

My reindeer code seems to be a bit off-center. Even though I followed a tutorial, my reindeer is not aligning properly as shown in the tutorial. Here is all the CSS code for the reindeer: .reindeer { height: 510px; width: 350px; position: ab ...

htmlcss

Is there a way to implement a scrollable feature for AutocompleteInput and SelectArrayInput components?

Currently, I am utilizing the AutocompleteInput and SelectArrayInput components from the AOR framework. It seems that when selecting from a large pool of items, the menu does not display properly on the screen. Is there a way to make the item list scrolla ...

reactjsmaterial-uiadmin-on-rest

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I have encountered a situation where I need to change the HTML link values from UPPERCASE to LOWERCASE and then apply a capitalization style. The problem lies in the fact that the links arrive in uppercase, so I had to come up with a workaround: The given ...

javascriptjqueryhtmlcss

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

Fixed-positioned elements

I'm facing a small issue with HTML5 that I can't seem to figure out. Currently, I have a header image followed by a menu div containing a nav element directly below it. My goal is to make the menu div stay fixed when scrolling down while keeping ...

javascriptjquerycsshtml

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

cssjsonangularpage-break

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

jqueryhtmlcss

The fullscreen API allows for the creation of a full-screen element containing internal elements, while also enabling the functionality

Is it possible to utilize the fullscreen API to make any element fullscreen, even if it contains multiple internal elements, while still maintaining the functionality of dropdowns and other custom elements that may be located in different areas of the page ...

javascriptjqueryhtmlcssjquery-ui

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

javascripthtmlcssangularjsangular-ui-grid

What is the method to set up Material-UI Docs without the need to install material-ui library

Currently, the process to install and run material-ui docs locally involves two separate npm install commands - one within material-ui directory, and another within material-ui/docs directory. You may want to use the docs site as a starting point for your ...

reactjsmaterial-ui

Tips for adjusting text to fit within a container without needing to use overflow:auto

Is there a way to prevent text overflow in a container without using the overflow:auto property? I've come across plugins that automatically reduce the text size, but I'm not keen on that solution. What I want is for long words or URLs to wrap on ...

jqueryhtmlcss

Utilize ngModel in conjunction with the contenteditable attribute

I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...

javascriptcsshtmlangularjs

Maintain the scrollable feature of the element until the final content is reached

I'm struggling to come up with the right keywords to search for my issue. I've tried using Google, but it seems my search terms are not effective. The problem I'm facing involves two relative div elements with dynamic content. This means th ...

javascriptcsshtmltwitter-bootstrap

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

I am in the process of developing a straightforward web application that allows users to customize their settings. On the settings page, there are several toggle buttons that need to have their state changed during the page load to align with the preferenc ...

javascripthtmlcssbutton