Кнопка OnClick: коллекция DIV должна появиться парения всех других коллекций - PullRequest
0 голосов
/ 10 апреля 2020

Я создал веб-сайт (проверьте 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);
}

Извините за длинный пост, но я старался быть настолько откровенным, насколько я мог.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...