Как сделать появление блока при нажатии на ссылку на CSS? Мне нужно, что бы блок(.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"; } }
Solution using CSS:
You can achieve this functionality using CSS by using the :hover pseudo-class instead of :focus. Here's an example:
HTML:
<a href="#" id="map_sh">Show Map</a><div class="map">
Map content here
</div>
CSS:
.map {display: none;
}
#map_sh:hover + .map {
display: block;
}
With this CSS code, the .map element will be displayed when the #map_sh link is hovered over.
If you still want to use JavaScript, you can use the following code:
HTML:
<a href="#" id="map_sh" onclick="showHide('map')">Show Map</a><div class="map" id="map">
Map content here
</div>
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";
}
}
}
With this JavaScript code, clicking on the #map_sh link will toggle the display of the .map element.