Material ui 将鼠标悬停在Internet Explorer上材质Ui中的卡片内容不工作

我试图给边界底部时，悬停在CardContent在材料界面。它在Chrome和Firefox中运行良好。但是，在internet explorer上，悬停样式不可见。我甚至尝试使用排版而不是span，然后悬停样式也没有在internetexplorer中实现。下面是代码

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withStyles  } from '@material-ui/core/styles';
import {
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  Typography,
} from '@material-ui/core';

const useStyles = theme => ({
  card: {
    margin:'15px',
    borderRadius: '0 0 15px 15px',
    backgroundColor: '#F5F4F9',
    boxShadow:'none',
  },
  actionArea: {
    "&:hover $focusHighlight": {
      opacity: 0
    }
  },
  focusHighlight: {},
  paragraph: {
    margin: '0 0 1.5em'
  },
  cardContentTitle: {
    fontSize: '1.25rem',
    fontWeight: '500',
    lineHeight: '1.5',
    margin: '0 0 0.75em',
    wordBreak:'break-word',
    [theme.breakpoints.up('sm')]: {
      fontSize: '1.1rem'
    }
  },
    cardContentSpan: {
      '&:hover': {
        color: '#000',
        borderBottom:'3px solid #000',
      },
    },
  cardContent: {
    backgroundColor: '#F5F4F9',
    borderRadius: '0 0 15px 15px',
    padding: '12px 16px'
  },
  cardContentDescription: {
    margin: '0 0 1.5em',
    fontSize: '1rem',
    lineHeight: '1.5',
    color: '#22205B',
    wordBreak:'break-word'
  }
});
class BlogContent extends PureComponent {  
  render(){
      const {classes} = this.props;
      return(
        <Card 
          className={classes.card}
          >
              <CardActionArea
                  classes={{
                    root: classes.actionArea,
                    focusHighlight: classes.focusHighlight
                  }}
              >
                <CardMedia
                  component="img"
                  alt="Image"
                  width="1000"
                  height="332"
                  image={this.props.image}
                />
                <CardContent className={classes.cardContent}>
                  <Typography 
                    gutterBottom 
                    variant="h5" 
                    component="h3"
                    className={classes.cardContentTitle}
                  >
                    <span
                        className={classes.cardContentSpan}                    
                        >
                          Derfor bør du droppe epositum i depositum
                    </span>
                  </Typography>
                  <Typography 
                    component="p"
                    className={classes.cardContentDescription}>
                      D oppretter du enkelt her, uavhengig om du er utleier eller leietaker. For å sikre oss om at du er den...
                    </Typography>
                </CardContent>
              </CardActionArea>
          </Card>
      );
    };
  }

export default withStyles(useStyles)(BlogContent);

import React，{PureComponent}来自'React'；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
进口{
卡片
行动区，
卡片内容，
CardMedia，
排版，
}来自“@material ui/core”；
const useStyles=主题=>({
卡片：{
保证金：'15px'，
边界半径：“0 0 15px 15px”，
背景颜色：“#F5F9”，
boxShadow:“无”，
},
行动领域：{
“&：悬停$focusHighlight”：{
不透明度：0
}
},
聚焦高亮度：{}，
第段：{
边距：“0 1.5em”
},
cardContentTitle：{
fontSize:'1.25rem'，
容重：“500”，
线宽：“1.5”，
边距：“0.75em”，
断字：“断字”，
[theme.breakpoints.up（'sm'）：{
fontSize:'1.1rem'
}
},
cardContentSpan：{
“&：悬停”：{
颜色：“#000”，
边框底部：'3px实心#000'，
},
},
卡片内容：{
背景颜色：“#F5F9”，
边界半径：“0 0 15px 15px”，
填充：“12px 16px”
},
cardContentDescription：{
边距：“0 1.5em”，
fontSize:'1rem'，
线宽：“1.5”，
颜色：“#22205B”，
断字：“断字”
}
});
类BlogContent扩展了PureComponent{
render（）{
const{classes}=this.props；
返回(
Derfor bør du droppe epositum i矿床
对她不利的是，我对她不利，因为我对她不利。。。
);
};
}
导出默认样式（useStyles）（BlogContent）；

您使用的IE版本是什么？我使用的是Internet Explorer 11