Можно ли с помощью css показать элемент, если он внешний для блока?

Question

[mangust1785]

Здравствуйте!

Можно ли с помощью CSS решить такую задачу: при наведении курсора мыши на блок .geo-office1 должен отображаться блок .city-name1?

.main-city1 - кружок на карте при наведении на него всплывает .city-name1 (подсказка с разъяснениями)

Нужно чтобы при наведении на наименовании офиса всплывала эта подсказка .city-name1
И наоборот, при наведении на .main-city1 менялся стиль названия .geo-office1

<section class="geo">
    <div class="container-fluid">
        <div class="row">
            
            <div class="col-md-5 geo-office">
                <div class="geo-office1"><h3>Офис1</h3></div>
                <div class="geo-office2"><h3>Офис2</h3></div>
            </div>
            
            <div class="col-md-7 geo-map">
                <div class="main-city main-city1">
                    <div class="city-name city-name1">Город<br>Офис1</div>
                </div>
                <div class="main-city main-city2">    
                    <div class="city-name city-name1">Город<br>Офис2</div>
                </div>
            </div>
            
        </div>
    </div>            
</section>

Comments

[Вадим]

Можно ли с помощью CSS

Нет.

Хотя если Вам подходит поддержка :has, то можно попробовать.

[Вадим]

через has -

.geo-office:has(.geo-office1:hover) + .geo-map .main-city1 {
  display: block;  
}

Но даже это так себе вариант, потому что хардкод на каждую связку офис-город.
На js и поддержка лучше и динамично можно всё сделать, чтобы не зависеть от количества элементов.

[mangust1785]

Вадим, Спасибо, попробую

[Сергей delphinpro]

mangust1785, работать будет, но не везде https://caniuse.com/css-has

Answer 1

[redesupar]

.city-name1 {display:none}

.geo-office1:hover~.city-name1 {
  display:block; 
}

Comments

[Вадим]

проверили? Работает?

[mangust1785]

Вадим, именно такая конструкция не работает, я попробую по вашему совету сделать, отпишусь позже