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;
}

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

1 个答案: