Esto es lo que probé hasta ahora. Como están en diferentes divs y no tienen una relación de padres, hermanos o hijos entre sí, según tengo entendido, CSS no es una opción válida.
<script> var circleOne = document.querySelector('.first_circle'); var adressOne = document.querySelector('.first_adress'); if (circleOne.matches(':hover')) { adressOne.style.color='green'; } else { adressOne.style.color='black'; } </script>Puede usar una combinación de onmouseenter y onmouseleave
var circleOne = document.querySelector('.first_circle'); var adressOne = document.querySelector('.first_adress'); circleOne.onmouseenter = () => adressOne.style.color='green'; circleOne.onmouseleave = () => adressOne.style.color='black'; <div class="first_circle">First Circle</div> <div class="first_adress">First Address</div>Debe usar detectores de eventos mouseenter, mouseleave para esta tarea
const firstEl = document.getElementById('first'); const secondEl = document.getElementById('second'); firstEl.addEventListener('mouseenter', () => secondEl.style.background = 'black'); firstEl.addEventListener('mouseleave', () => secondEl.style.background = 'transparent'); secondEl.addEventListener('mouseenter', () => firstEl.style.background = 'blue'); secondEl.addEventListener('mouseleave', () => firstEl.style.background = 'transparent'); #first, #second { display: inline-block; width: 100px; height: 100px; border: 1px solid #e0e0e0; } <div id="first"></div> <div id="second"></div>