смена текста после клика и ухода мыши с карточки

const cardCats = document.querySelector('.card-section');

const star = function(event) {
  event.target.closest('.card-cats')
}

//Function change border card:
function changeColorBorder(event) {
  const target = event.target.closest('.card-cats');
  
  if (target === null) {
    return
  };
  
  target.querySelector('.card-cats__slogan').classList.toggle('changeBorder');
  target.querySelector('.card-cats__triangle').classList.toggle('changeBorderGradient');
  target.querySelector('.card-cats__main').classList.toggle('changeBorder');
  target.querySelector('.card-cats__image-circle').classList.toggle('changeBackground');
};

//Function to move the cursor from the card & change top text card:
function changeTopTextCard(event) {

  const target = event.target.closest('.card-cats');
 

  const cardText = target.querySelector('.card-cats__slogan > span');
  cardText.innerHTML = 'TEST STRING'

};



cardCats.addEventListener('click', changeColorBorder);
cardCats.addEventListener('mouseout', changeTopTextCard);

.card-section {
  width 100%;
  display: flex;
  justify-content: space-evenly;
}

.card-cats {
  width: 40%;
  border: 2px solid orange;
}

.card-cats__head {
  display: flex;
  justify-content: center;
  background-color: green;
}

.changeBorder {
  color: #D91667;
  background-color: orange;
}
.changeBorderGradient {
  font-size 100px;
 }
    
.changeBackground {
  background-color: #D91667;
}

<div class="card-section">

        <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 1</h3>
            <p class="card-cats__subtitile">с рыбой</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>
        
                <div class="card-cats">
          <div class="card-cats__head">
            <div class="card-cats__triangle"></div>
            <h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
          </div>

          <div class="card-cats__main">
            <h3 class="card-cats__title">Товар 2</h3>
            <p class="card-cats__subtitile">с мясом</p>
            <ul class="card-cats__properti">
              <li class="card-cats__properti-item">40 порций</li>
              <li class="card-cats__properti-item">2 мыши в подарок</li>
            </ul>

            <img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
            <div class="card-cats__image-circle">
              <p class="card-cats__image-circle-top">2</p>
              <p class="card-cats__image-circle-bottom">кг</p>
            </div>
          </div>

          <span class="card-cats__bottom">
            Чего сидишь? порадуй кота, 
            <span class="card-cats__bottom-btn">
              <a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
            </span>
          </span>
        </div>

      </div>