Как изменить цвет текста при наведении курсора на границу в CSS?

Question

Я новичок в разработке! Я начал изучать несколько месяцев: go: D Я пытаюсь сделать так, чтобы, когда я наводил курсор на элемент div, содержащий заголовок и некоторый текст, вокруг него появлялась граница, окрашенная не так, как фон , выделив область этого div. Я добился успеха в этом!

.item {
    border: solid 0px;
    border-spacing: 10px;
    background: rgba(164, 165, 219, 0.45);
    border-radius: 20px;
}

.item:hover {
    background: rgba(72, 74, 196, 0.45);
}

Однако я не могу изменить цвет текста. Я могу изменить цвет текста только при наведении курсора прямо над ним.

.project-text {
    color: rgb(43, 41, 41);
    font-size: 50px;
}

.project-text:hover {
    color: white;

}

Я хочу иметь возможность изменить цвет текста уже при наведении курсора на границу элемента div, возможно ли сделать так?

Answer 1

Я предполагаю, что .project-text находится внутри .item. Вы можете создать селектор CSS для стилей дочерних элементов на основе состояния наведения родительского элемента. См комментируемый код ниже; Я добавил отступ для .item, чтобы лучше показать результат.

.item {
    border: solid 0px;
    border-spacing: 10px;
    background: rgba(164, 165, 219, 0.45);
    border-radius: 20px;
    padding: 2rem /* two times the font size of the body */
}

.item:hover {
    background: rgba(72, 74, 196, 0.45);
}

.project-text {
    color: rgb(43, 41, 41);
    font-size: 50px;
}

.item:hover .project-text { /* changed selector */
    color: white;

}

<div class="item">
  <p class="project-text">
    Hello
  </p>
</div>

Answer 2

Это то, что вы спрашиваете?

Я просто добавил дополнительные background-color для hover, не стесняйтесь удалить это.

#mainDiv {
   height: 30px;
   width: 100px;
   border:1px solid black;
   font-size:bold;
   text-align:center;
   padding:4px;
   color:red;
}

#mainDiv:hover {
  color: yellow;
  background-color: teal;
  font-size: 15px;
}

<div id="mainDiv">
  Hover here
</div>