Как сделать появление блока при нажатии на ссылку на CSS?

Question

[Сергей Минаков]

Мне нужно, что бы блок(.map) появлялся при наведении на ссылку(#map_sh). Пробовал сделать таким кодом:

#map_sh:focus+.map {
    display: block;
}

Но ничего не получилось. Фот сайт на котором я это делаю.
Решил проблему JavaScript кодом.

function showHide(element_id) {
            if (document.getElementById(element_id)) {
                var obj = document.getElementById(element_id);

                if (obj.style.display != "block") {
                    obj.style.display = "block";
                } else obj.style.display = "none";
            }
        }

Comments

[sergey]

Посмотрел ваш код и не увидел ничего: где ссылка к примеру на которую необходимо наводить? Второе это сам код, он ужасен, если вы делаете меню: то ul > li > a > span, а не тег p

[tommy_13]

после #map_sh нет слоя с .map, поэтому и не работает.
не считая, что наведение - это :hover

Answer 1

[Alexander Belov]

#map_sh:hover + .map {
    display: block;
}

https://jsfiddle.net/0g6z4sLc/

Comments

[Сергей Минаков]

Не работает. Я код вставил на этот сайт. primp.esy.es

[Alexander Belov]

Сергей Минаков: У .map прописан display: none?

[Сергей Минаков]

Alexander Belov: По идеи да, но пока я его убрал?

Answer 2

[Юрий Олиярнык]

простым css это не возможно сделать, так как не позволяет в даном случае структура html-коду
используйте библиотеку jQuery и функцию click(если вы хотите, что бы при клике на ссылку #map_sh появлялся блок .map)

$('#map_sh').click(function() {
$('.map').toggleClass('active');
})

или используйте такую конструкцию (если вы хотите, что бы при наведении на ссылку #map_sh появлялся блок .map)

$( "#map_sh" ).hover(
function() {
$( '.map').addClass('active');
}, function() {
$( '.map').removeClass('active');
}
);

Comments

[Сергей Минаков]

Мне нужно сделать это на css

[Юрий Олиярнык]

Сергей Минаков: удачи)

[Егор Живагин]

JQuery ради этого грузить, серьёзно?)