当您使卡片可点击时，如何删除引导卡片中文本上的文本装饰（下划线）？

Question

我在卡片中添加了一个 onClick 功能，因此您可以转到项目详细信息视图并阅读更多内容并查看更多图像。 onClick 使文本变为蓝色并给它一个下划线。我覆盖了蓝色文本，但当我悬停时似乎无法删除蓝线。

组件：

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle } from 'reactstrap';
import './ItemCard.css';

class ItemCard extends Component {

  render() {

    return (
    <div>
      <Card className="text-center item-card" onClick={this.props.clicked} > 
        <CardImg top width="100%" src={this.props.image} alt="Card image cap" />
        <CardBody className="item-card-body">
          <CardTitle>{this.props.title}</CardTitle>
          <CardSubtitle>${this.props.price}</CardSubtitle>
          <CardText>{this.props.description}</CardText>
        </CardBody>
      </Card>
    </div>
    );
  }
}

export default withRouter(ItemCard);

组件 CSS：

.item-card {
  max-width: 20em;
  flex: 1;
  color: black;
}

.item-card :hover {
  color: black;
  text-decoration: none !important;
}

Answer 1

text-decoration没有可继承属性，需要直接设置给子元素：

.item-card {
  max-width: 20em;
  flex: 1;
  color: black;
}

.item-card *:hover {
  color: black;
  text-decoration: none !important;
}