Скрыть все по hover, кроме активного
 

Блин, что то я запарился с элементарной ситуевиной...

Есть схема (картинка jpg) в div-е. Картинка фоновая и задана через background-size: cover.
В этом диве расставлены подсказки по схеме (тоже div-ы c одинаковыми ID).
Все работает просто - наводишь курсор на подсказку, cover - сбрасывается и фоновая схема позиционируется увеличивая то место, где стоит подсказка.

Задача в том, что бы при наведении на одну подсказку другие скрывать.

Казалось бы чего там, CSS :hover и всего делов то.
Но если с помощью CSS то нужно каждому div-у с подсказкой давать уникальный ID и перебирать их все, описывая каждое событие.
Более того, в таком варианте я не могу получить доступ (скрыть) к тем div-ам, которые стоят выше в коде по событию элемента который ниже в коде.

Пробовал на JS - все можно сделать, но опять же нужно перчислять все ID подсказок, что неудобно и не практично ибо на каждой схеме их будет разное количество.

Думаю нужно написать функцию, логику, и запускать ее по событию на каждой подсказке.

Вот только как это сделать с одинаковыми ID и не затрагивать активный элемент (у которого такой же ID) на который в данный момент наведен курсор?

<div id="combox">

<div class="cont"></div>

<div class="cont"></div>

<div class="cont"></div>

</div>

Пробовал и так:

(function() {
    var switcher = $('[class *= "cont"]'),
         target = $('#combox div');
    
    switcher.hover.not(this)(
        function() { target.hide(); },
        function() { target.show(); }
    );
})();

И так:

var imgid;
$('.cont').mouseenter(function(){
imgid = this.id;
$('.cont').each(function(){
if(this.id==imgid) $(this).stop(false,true).css('visibility', 'hidden');
else $(this).stop(false,true).css('visibility', 'visible');
});
});

В общем подскажите плиз.. Вопрос видать детский совсем...:blink:

Пробую сейчас с .not(this) Но, что то не как...:-/

div:not(:hover) {
    color: #f00;
}

Не пойдет?

Подошло бы, но такое решение не позволит скрывать div-ы находящиеся выше в коде, чем тот по которому :hover

У вас 3 элемента в родителе, и для них подсказки, навел - есть, укатил - нет. Не понятна проблема, а div:not(:hover) тоже самое что и hover.not(this). Можно всем скрыть и id для этого не нужно, а у текущего показать, если уж какая-то проблема с доступом.

Да справился уже

<script>
     $("div[id^='cont']").hover(
      function () {
        $("div[id^='cont']").not(this).css ("display","none");
      }, 
      function () {
      $("div[id^='cont']").not(this).css ("display","block");
      }
    );
</script>

НА CSS не получится, говорю же, что не могу получить доступ к первому диву с второго или третьего по списку. Вот от первого к второму и тд. пожалуйста. Тут без JS я так понял никак.

Если