How to make a block appear when clicking on a link using CSS?

Question

css

I need the block( .map ) to appear when hovering over the link( #map_sh ). Tried to do it with code like this:

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

But nothing happened. Phot site where I do it.
Solved the problem with JavaScript code.

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";
            }
        }

Answer 1

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

https://jsfiddle.net/0g6z4sLc/

Answer 2

it is not possible to do this with simple css, because in this case the structure does not allow html code
, use the jQuery library and the click function (if you want the .map block to appear when you click on the #map_sh link)
$('#map_sh'). click(function() {
$('.map').toggleClass('active');
})
or use this construct (if you want the .map block to appear when hovering over the #map_sh link)
$( "#map_sh " ).hover(
function() {
$( '.map').addClass('active');
}, function() {
$( '.map').removeClass('active');
}
);