Я создал веб-сайт (проверьте hugocaillaud.com для лучшего понимания), на котором у меня есть коллекция изображений, текстов и видео, которые я буду показывать / скрывать при нажатии кнопки. Когда я нажимаю кнопку, запускается функция, которая также будет стилизовать коллекции, как вы можете видеть на веб-сайте. Каждое изображение, текст или видео можно перетащить в любое место на экране. Теперь моя проблема в том, что я хочу показать последнюю отображаемую коллекцию при наведении на каждую другую коллекцию.
Я приведу вам пример с двумя кнопками, двумя коллекциями и js, который я продолжаю.
index. html
<button id="btnFern" class="bouton" onclick="displayElements('btnFern', 'fern', 'imgfern')">
Fougères, démons et comptabilité
</button>
<button id="btnPreppeur" class="bouton" onclick="displayElements('btnPreppeur', 'preppeur', 'imgpreppeur')">
Préparation peurs
</button>
<div id="fern" class="container" style="display: none;">
<div class="drag imgfern"><img src="images/web/fern1.jpg" alt="" width="500"></div>
<div class="drag imgfern"><img src="images/web/fern2.jpg" alt="" width="500"></div>
<div class="drag imgfern"><img src="images/web/fern3.jpg" alt="" width="500"></div>
<div class="drag imgfern"><img src="images/web/fern4.jpg" alt="" width="500"></div>
<div class="drag imgfern"><img src="images/web/fern5.jpg" alt="" width="800"></div>
<div class="drag imgfern"><img src="images/web/fern6.jpg" alt="" width="600"></div>
</div>
<div id="preppeur" class="container" style="display: none;">
<div class="drag imgpreppeur">
<p class="textdescri"> Préparation Peurs est une installation qui prend place dans les salles d’accueil des
théâtres acompagnant la pièce le mont Analogue, mis en scène par Victor Thimonier. <br>
Ce travail parle des angoisses et des peurs auxquels nous sommes confrontés et qu’il faut anticiper, lors
d’ascenscions et d’aventures de ce genre. <br>
S’inspirant d’une image de tournage d’un making of, quatres panneaux annoncent les peurs. <br>
Les monstres, la nourriture, l’air, et l’inconnu.
</p>
</div>
<div class="drag imgpreppeur"><img src="images/web/pp1.jpg" alt="" width="500"></div>
<div class="drag imgpreppeur"><img src="images/web/pp3.jpg" alt="" width="800"></div>
<div class="drag imgpreppeur"><img src="images/web/pp4.jpg" alt="" width="500"></div>
<div class="drag imgpreppeur"><img src="images/web/pp5.jpg" alt="" width="500"></div>
<div class="drag imgpreppeur"><img src="images/web/pp6.png" alt="" width="500"></div>
</div>
main. css
.drag {
position: absolute;
cursor: grab;
}
main. js
/**Function that will display elements and use other function such
as cascading styling effect or display collection above the others */
function displayElements(buttonName, containerName, elementsName) {
let buttonId = document.getElementById(buttonName)
let containerId = document.getElementById(containerName);
let elements = document.getElementsByClassName(elementsName);
let cascade;
if (containerId.style.display === "none") {
$(buttonId).css("background-color", "black");
$(buttonId).css("color", "white");
$(containerId).css("display", "block");
cascade = true;
cascadingEffect(elements, cascade);
containerHover(elements);
}
else {
cascade = false;
$(buttonId).css("background-color", "white");
$(buttonId).css("color", "black");
$(containerId).css("display", "none");
}
};
Я пытался чтобы максимально упростить код, обратите также внимание на то, что функция containerDisplayedHover () - это функция, которую я должен использовать для отображения коллекции поверх других.
Я пробовал много вещей, таких как
function containerHover(elements) {
$(elements).css('z-index', 3);
}
Извините за длинный пост, но я старался быть настолько откровенным, насколько я мог.