Changing Bootstrap card text on hover-CodePudding

I'm working on a website where I have a list of products (displayed in bootstrap cards) I want to be able to change the card text when the user hovers over it to completely different text (Hide or replace the original text). Does anyone know of any elegant solutions or any pointers? Thanks.

CodePudding user response：

You can make 2 divs containing the text and the text hover and toggle the display property depending of the card hover

.card-hover-text{
    display:none;
}
.card:hover .card-text{
    display:none;
}
.card:hover .card-hover-text{
    display:block;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<div  style="width: 18rem;">
  <img  src="data:image/svg xml;charset=UTF-8," alt="Card image cap">
  <div >
    <h5 >Card title</h5>
    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p >New text</p>
    <a href="#" >Go somewhere</a>
  </div>
</div>