如何在悬停时交换文本列表和图像URL列表

时间:2019-06-26 11:38:02

标签: javascript css hover

我想创建一个带有背景图像和一些文本链接的全屏部分。当您将文本链接悬停时,我希望链接中的文本以及背景可以通过一系列文本和图像URL进行更改。

我该怎么做?

请参阅https://www.agentur-loop.com/

上第一部分的示例
    <div class="contents" style="visibility: visible;">
      <div class="content_wrap content_wrap--current content--current--done">
        <div class="content content--current">
    <div class="block  block--landing block--fullwidth-mobile">
      <div class="landing  js-landing initialized is-visible" data-config="{&quot;path&quot;:&quot;assets\/images\/landingpageintro\/&quot;,&quot;total&quot;:78,&quot;imgs&quot;:[&quot;landing_00000.jpg&quot;,&quot;landing_00001.jpg&quot;,&quot;landing_00002.jpg&quot;]}">
        <div class="landing__inner">
          <div class="landing__imgs">
            <div class="landing__img" style="background-image: url(assets/images/landingpageintro/landing_00000.jpg);"></div>
            <div class="landing__img" style="background-image: url(assets/images/landingpageintro/landing_00001.jpg);"></div>
            <div class="landing__img" style="background-image: url(assets/images/landingpageintro/landing_00002.jpg);"></div>
          </div>
          <div class="landing__text">
            <div class="landing__text__outer">
              <div class="landing__text__inner">
                <h1>
                  The fully <br>charged
                  <span class="landing__text__hover" data-active="0">
                  <span class="is-active"><span>digital</span></span>
                  <span class=""><span>social</span></span>
                  <span class="is-placeholder"><span>technology</span></span>
                  <span class=""><span>design</span></span>
                  <span class=""><span>video</span></span>
                  <span class=""><span>content</span></span>
                  <span class=""><span>strategy</span></span>
                  <i><span></span></i>
                  </span> <br>
                  powerhouse.
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</body>```

0 个答案:

没有答案