使用动态ID更改背景，并在菜单上悬停（黎明主题）

Question

目前，我从定制器中创建了一个可编辑的部分，您可以在其中添加桌面和移动图像以及菜单。现在，问题是如何将这些背景图像与每个“详细信息”链接起来，并且当用户将鼠标传递到其上时，它会改变。我正在使用NAV-Component，因此我想使用DAWN主题中的代码向Global.js添加修改。

这是开发中这个主题的预览： https://f0jfypzl040i0kcv-53196980409.shopifypreview.com

Could someone guide me?提前致谢！

---

这是我目前正在使用的，我必须在其中添加新的HTML代码？

<script>

    //megamenu hover
    let items = document.querySelector(".aside__nav").querySelectorAll("details");
    items.forEach(item => {
        item.addEventListener("mouseover", () => {
            item.setAttribute("open", true);
            item.querySelector("ul").addEventListener("mouseleave", () => {
                item.removeAttribute("open");
            });
            item.addEventListener("mouseleave", () => {
                item.removeAttribute("open");
            });
        });
    });

    //megamenu image show on hover
    var $activeElement = $(".megamenu-text");
    $(".custom-mega-img").hover(function(){
        $(this).find(".megamenu-img").addClass( "active" );
    }, function(){
        $(".megamenu-img").removeClass( "active" );
    });

</script>

nav.aside__nav {
    position: absolute;
    top: 25%;
    left: 0;
    z-index: 1;
    padding: 0 1rem;
    max-width: max-content;
    width: 100%;
}

ul.aside__triggers {
    list-style: none;
}

li.aside__trigger-container {
    padding: .5rem 0;
}

li.aside__link-container {
    list-style: none;
}

ul.aside__links {
    padding: 0;
}

.aside__trigger {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    background-color: transparent;
    text-transform: uppercase;
    color: currentColor;
    font-weight: 700;
    letter-spacing: 0;
}

summary.aside__sub-trigger {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
}


ul.aside__sub-links {
    list-style: none;
    padding: 0 2.5rem;
}

a.aside__sub-link,
a.aside__link {
    text-decoration: none;
    color: currentColor;
    font-size: 1.3rem;
}

details-disclosure>details {
    position: inherit;
}

.list-menu--disclosure {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto !important;
    width: 90% !important;
    min-width: 90% !important;
    z-index: 2 !important;
    height: 30vh;
}

span.megamenu-img {
    text-align: center;
    width: 65%;
}

.desktop-feature-img {
    display: none;
    position: absolute;
    top: 0;
}

span.megamenu-text {
    width: 35%;
}

span.megamenu-img.active .desktop-feature-img {
    display: block;
    z-index: 2;
}

.list-menu__item--active .desktop-feature-img {
    display: block;
}

<section class="landing__backgrounds">  
    {%- for block in section.blocks -%}
        <div class="landing__background" data-id="{{ block.id }}">
            <div class="background-box landing__background-image">
                {% if block.settings.image != blank and block.settings.image_2 != blank %}
                    <div class="banner__media{% if block.settings.image == blank and block.settings.image_2 == blank %} placeholder{% endif %}">
                        <img 
                            class="hidden-mobile"
                            srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
                                {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
                                {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
                                {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
                                {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
                                {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
                                {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
                                {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
                                {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
                                {{ block.settings.image | image_url }} {{ block.settings.image.image.width }}1500w"
                            src="{{ block.settings.image | image_url: width: '1500px' }}"
                            loading="lazy"
                            alt="{{ block.settings.image.alt | escape }}"
                            width="{{ block.settings.image.width }}"
                            height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio }}"
                        >
                    </div>
                    <div class="banner__media {% if block.settings.image == blank and block.settings.image_2 == blank %} placeholder{% endif %}">
                        <img 
                            class="hidden-desktop"
                            srcset="{%- if block.settings.image_2.width >= 375 -%}{{ block.settings.image_2 | image_url: width: 375 }} 375w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 550 -%}{{ block.settings.image_2 | image_url: width: 550 }} 550w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 750 -%}{{ block.settings.image_2 | image_url: width: 750 }} 750w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 1100 -%}{{ block.settings.image_2 | image_url: width: 1100 }} 1100w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 1500 -%}{{ block.settings.image_2 | image_url: width: 1500 }} 1500w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 1780 -%}{{ block.settings.image_2 | image_url: width: 1780 }} 1780w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 2000 -%}{{ block.settings.image_2 | image_url: width: 2000 }} 2000w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 3000 -%}{{ block.settings.image_2 | image_url: width: 3000 }} 3000w,{%- endif -%}
                                {%- if block.settings.image_2.width >= 3840 -%}{{ block.settings.image_2 | image_url: width: 3840 }} 3840w,{%- endif -%}
                                {{ block.settings.image_2 | image_url }} {{ block.settings.image.image_2.width }}550w"
                            src="{{ block.settings.image_2 | image_url: '550px' }}"
                            loading="lazy"
                            alt="{{ block.settings.image_2.alt | escape }}"
                            width="{{ block.settings.image_2.width }}"
                            height="{{ block.settings.image_2.height }}"
                        >
                    </div>
                {% endif %}
            </div>
        </div>
    {%- endfor -%}  
    
    <nav class="aside__nav">
        <ul class="aside__triggers" role="list">
            {%- for link in section.settings.menu.links -%}
                <li class="aside__trigger-container">
                    {%- if link.links != blank -%}
                        <aside-menu>
                            <details id="Details-AsideMenu-{{ forloop.index }}">
                                <summary class="aside__trigger">
                                    <span>{{ link.title | escape }}</span>
                                </summary>
                                <ul id="AsideMenu-MenuList-{{ forloop.index }}" class="aside__links" role="list" tabindex="-1">
                                    {%- for childlink in link.links -%}
                                        <li class="aside__link-container">
                                            {%- if childlink.links == blank -%}
                                                <a href="{{ childlink.url }}" class="aside__link">
                                                    {{ childlink.title | escape }}
                                                </a>
                                                {%- else -%}
                                                <details id="Details-AsideSubMenu-{{ forloop.index }}">
                                                    <summary class="aside__sub-trigger">
                                                        <span>{{ childlink.title | escape }}</span>
                                                    </summary>
                                                    <ul id="AsideMenu-SubMenuList-{{ forloop.index }}" class="aside__sub-links">
                                                        {%- for grandchildlink in childlink.links -%}
                                                            <li>
                                                                <a href="{{ grandchildlink.url }}" class="aside__sub-link">
                                                                    {{ grandchildlink.title | escape }}
                                                                </a>
                                                            </li>
                                                        {%- endfor -%}
                                                    </ul>
                                                </details>
                                            {%- endif -%}
                                        </li>
                                    {%- endfor -%}
                                </ul>
                            </details>
                        </aside-menu>
                        {%- else -%}
                            <a href="{{ link.url }}" class=""{% if link.current %} aria-current="page"{% endif %}>
                                <span {%- if link.current %} class=""{% endif %}>{{ link.title | escape }}</span>
                            </a>
                    {%- endif -%}
                </li>
            {%- endfor -%}
        </ul>
    </nav>
</section>

Answer 1

动态导航绝不具有准确的导航链接。最好致电导航中的集合。因此，您将获得特色图像，如果您想要其他移动映像，则可以添加图像拾取器选项。在HTML代码下方添加标题。黎明主题的液体。

  //megamenu hover
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
                          item.setAttribute("open", true);
    item.querySelector("ul").addEventListener("mouseleave", () => {
       item.removeAttribute("open");
    });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
});

//megamenu image show on hover
var $activeElement = $(".megamenu-text");
$(".custom-mega-img").hover(function(){
        $(this).find(".megamenu-img").addClass( "active" );
   }, function(){
  $(".megamenu-img").removeClass( "active" );
    });

details-disclosure>details {
    position: inherit;
}
.list-menu--disclosure {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto !important;
    width: 90% !important;
  min-width: 90% !important;
  z-index: 2 !important;
      height: 30vh;
}

span.megamenu-img{
  text-align: center;
  width: 65%;
}
.desktop-feature-img{display: none;position: absolute;top: 0;}
span.megamenu-text{width: 35%;}
span.megamenu-img.active .desktop-feature-img {
    display: block;
  z-index: 2;
}

.list-menu__item--active .desktop-feature-img {
    display: block;
}

<a href="{{ childlink.url }}" class="header__menu-item custom-mega-img list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
  <span class="megamenu-text">{{ childlink.title | escape }}</span>
  <span class="megamenu-img">
       {% if childlink.object.featured_image != blank %}
            <img src="{{ childlink.object.featured_image | img_url: 'medium' }}" class="desktop-feature-img"> 
        {% endif %}
  </span>
</a>