Menu
I'm trying to make an interactive map with information on it. When you click on a dot it is resized and shows some contacts. This is achieved because the element gets the :active and :focus pseudo-classes.
Is there any way to remove the pseudo-classes from the element when it is clicked a second time? In effect, is it possible make element close when it is clicked again?
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
top: 20px;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}<div class="distribution-map">
<button class="map-point">
</button>
</div>
497
To remove focus around the button outline:none property is used. Outline property: Outline is an element property which draws a line around element but outside the border. It does not take space from the width of an element like border.
The blur() method removes focus from an element.
The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.
To remove or disable focus border of browser with CSS, we select the styles for the :focus pseudo-class. to set the outline style to none to remove the border of the element that's in focus.
pointer-events: none;
By adding pointer-events: none; to the focused element you can stop mouse interaction on the element so effectively it becomes unfocused on the next click.
The following modifications are required:
pointer-events: none; to .distribution-map .map-point:active, .distribution-map .map-point:focus
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
top: 20px;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
pointer-events: none;
}<div class="distribution-map">
<button class="map-point">
</button>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
