Я пытаюсь сделать наложение горячей точки с помощью jquery, сейчас есть 4 различных горячих точки, по которым можно щелкнуть, горячие точки расположены на фоновом изображении, которое составляет 100vh. на данный момент он функционирует, когда я щелкаю одну точку доступа, содержимое отображается, но когда я нажимаю на следующую точку доступа, содержимое предыдущей точки доступа по-прежнему отображается. Мне нужно написать какую-то функцию, которая разделяет каждую точку доступа. Хотя я не знаю, с чего начать.
Ниже html:
<!-- overlay for hotspot on the background-image -->
<div class="overlay-hotspot" id="hotspot-1">
<div class="overlay-content">
<h3 class="white">
Anna Meyer
</h3>
<h4 class="white">
IT Spezialist, Frontend Teamplayer Lieblingsbuch: Sapiens
</h4>
</div>
</div>
<div class="overlay-hotspot" id="hotspot-2">
<div class="overlay-content">
<h3 class="white">
Sabrina Schmit
</h3>
<h4 class="white">
DevOps leiter, Frontend Teamplayer Lieblingsbuch: Sapiens
</h4>
</div>
</div>
<div class="overlay-hotspot" id="hotspot-3">
<div class="overlay-content">
<h3 class="white">
Mathew Stokes
</h3>
<h4 class="white">
Frontend Teamplayer Lieblingsfilm: 300
</h4>
</div>
</div>
<div class="overlay-hotspot" id="hotspot-4">
<div class="overlay-content">
<h3 class="white">
Franca Hoyer
</h3>
<h4 class="white">
UX/UI Designer, Graphic professional..
</h4>
</div>
</div>
<!-- end overlay for hotspot -->
<div class="container-fluid">
<!--hotspots-->
<div class="hotspot" id="spot1">
<div class="pulse"></div>
<div class="dot"></div>
</div>
<div class="hotspot d-none d-lg-block" id="spot2">
<div class="pulse"></div>
<div class="dot"></div>
</div>
<div class="hotspot d-none d-lg-block" id="spot3">
<div class="pulse"></div>
<div class="dot"></div>
</div>
<div class="hotspot d-none d-sm-block" id="spot4">
<div class="pulse"></div>
<div class="dot"></div>
</div>
<!-- hotspots end -->
// Hotspot functions //
// Hotspot 1 //
$('#spot1').on('click', function () {
$('#hotspot-1').css("opacity", "1");
return false
})
$('#people-hotspot').on('click', function () {
$('.overlay-hotspot').css("opacity", "0");
return false
});
// hotspot 1 end //
// hotspot 2 //
$('#spot2').on('click', function () {
$('#hotspot-2').css("opacity", "1");
return false
});
$('#people-hotspot').on('click', function () {
$('.overlay-hotspot').css("opacity", "0");
return false
});
// hotspot 3 start //
$('#spot3').on('click', function () {
$('#hotspot-3').css("opacity", "1");
return false
});
$('#people-hotspot').on('click', function () {
$('.overlay-hotspot').css("opacity", "0");
return false
});
//hotspot 3 end //
// hotspot 4 start //
$('#spot4').on('click', function () {
$('#hotspot-4').css("opacity", "1");
return false
});
$('#people-hotspot').on('click', function () {
$('.overlay-hotspot').css("opacity", "0");
return false
});
// hotspot 4 end //
$('.dropdown-toggle').on('click', function () {
$('.dropdown-menu')
});