هاور hover

سلام

من در سند html کلاسی دارم به فرض  نامش است x که درونش متنی قرار داره با کلاسی به نام y

در سند css هم به کلاس x طول و عرض دادم بعلاوه بک گراند و در کلاس y هم متن رو طوری مرتب کردم که درون اون طول و عرضی که دادم خوب بشینه

اما مشکل اینه که من به کلاس x خودم هاور میدم و بک گراندش رو میخوام وقتی موس رفت روش رنگش تغییر کنه میاد متن های درونش رو هاور میکنه در حالی که من نمیخوام متنش تغییر کنه در واقع انگار که دارم به کلاس y هاور میدم

  <div class="gt">
                     
                       <pre class="ep"> price is : 300 lir </pre> 
                       <pre class="ep"> place is : ezmir </pre> 
                      <a href="#"   > <pre> more info </pre> </a>
                </div>

.gt
{
    z-index: 3;
    width: 180px;
    height: 130px;
    background-color: rgb(255, 255, 255);
    position: relative;
    border: solid;
    border-radius: 5px;
    margin: 15px;
    margin-right: 35px;
    float: right;
  
}
 pre.ep
{
    text-align: center;
    direction: ltr;
    margin:auto 0;
    margin-bottom: 20px;
    margin-right:20px ;
    font-size: large;
    font-weight: bold;
    text-transform: capitalize;
}
.gt  :hover
{
    display: block;
    background-color: yellow;
}