Как убрать текстовое оформление (подчеркивание) на тексте с карты Bootstrap, когда вы делаете карту кликабельной?

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