Change text hover - css

Question

How change text when I push cursor in button? If I push cursor in button with price, will show text: "Add to basket".
This is Code:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>
How solve this problem?

Answer 1

You can use a wrapper div to catch the over, I think is more maintainable if you change the html in the future:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
width: 20%;
margin: 20px auto;
cursor: pointer;
}
.wrapper:hover .info {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
<div class="price">$50</div>
<div class="info">Add to basket</div>
</div>

Answer 2

you can use :active to show text when mouse is clicking down on the price like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:active + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
if you are trying to show the text on :hover like the title of the question says the unser :hover like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:hover + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
Update 3:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info,
.price:hover .amount {
display: none;
}
.price:hover .info {
display: block;
}
<div class="price">
<div class="amount">$50</div>
<div class="info">Add to basket</div>
</div>