How to make a text appear on hover and another disappear using CSS-CodePudding

I have to build a card with text (that's not the problem) the problem is that the text on the card has to disappear on hover because a different text should appear on hover.

I made a simplified version of my code, so you don't have to look at that mess XD.

Thank you very much, if you could help<3

* {
  padding: 0;
  margin: 0;
}


/* #45B8AC card color */

body {
  background-color: #D65076;
}

.card {
  width: 500px;
  height: 300px;
  position: absolute;
  color: white;
  left: 25%;
  top: 25%;
  background: #FF6F61;
  transition: ease-in-out 0.6s;
}

.card-h1 {
  font-size: 30px;
  position: absolute;
  left: 50px;
  top: 50px;
}

.card-text {
  font size: 17px;
  position: absolute;
  left: 50px;
  top: 150px;
  line-height: 1.5;
}

.card:hover .hide {
  background: black;
}

.hide {
  display: none;
}

<body>
  <div >
    <div >
      BergWerk
    </div>
    
    <div >
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident <br> modi labore esse aliquam rem, voluptatem porro veritatis assumenda <br> inventore neque quas dolore maiores deleniti officia dignissimos autem <br> eum nihil aliquid minima
      debitis corporis id quam! Error debitis nulla <br> explicabo repellendus quo consequatur vel hic illo, voluptates reprehe <br>
    </div>
    
    <div >
      <h1>Hello WORLD</h1>
    </div>
</body>

CodePudding user response：

I think this would be a simple way to implement what you want. I'm covering the main text with the text you want to appear on hover, making it invisible, and then making it visible again only on hover.

body{
  background-color: #D65076;
}

.parent, .cover{
  height: 100px;
  width: 100px;
  background-color: #FF6F61;
}

.parent{
  position: relative;
}

.cover{
  opacity: 0;
  position: absolute;
  top: 0;
}

.cover:hover{
  opacity: 100;
}

<div >
  Some text would go in here
  <div > 
    The hover text would go here
  </div>
</div>

CodePudding user response：

I used jQuery, Hope this helps!

$('.card-text').hover(function() {
    $('.hide').css("display","block");
    $('.card-text').css("display","none");
})

$('.hide').hover(function() {
    $('.card-text').css("display","block");
    $('.hide').css("display","none");
})