Question

当您将鼠标悬停在bg会更改的链接上时，我试图建立一个网站。页面加载后，是否有办法触发链接“ a”的悬停效果？

.bg {
  background-image: url('https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb');
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: ease-in-out 0.5s;
}

.a:hover~.bg {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png');
  transition: ease-in-out 0.5s;
}

.b:hover~.bg {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png');
  transition: ease-in-out 0.5s;
}

.c:hover~.bg {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png');
  transition: ease-in-out 0.5s;
}

.work>a:hover {
  color: #d55d5d;
}

<div class="work">
  <a class="a" href=""> a
        </a>
  <a class="b" href=""> b
        </a>
  <a class="c" href=""> c
        </a>
  <div class="bg"> </div>
</div>

Answer 1

这是一个使用jQuery的解决方案，它是一个基于JavaScript的软件包。该解决方案通过将数据background-image悬停在上方时，使用数据属性为元素动态设置a的URL来工作。当您将光标从a标记移开时，会将background-image重置为默认地址。

$(function() {

  var defaultImageUrl = 'https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb';

  $('.bg').css('background-image', "url('" + defaultImageUrl + "')");

  $('a').on('mouseenter', function() {
    $('.bg').css('background-image', "url('" + $(this).data('image-url') + "')");
  });

  $('a').on('mouseleave', function() {
    $('.bg').css('background-image', "url('" + defaultImageUrl + "')");
  });

});

.bg {
  /*background-image: url('https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb');*/
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: ease-in-out 0.5s;
}

.a:hover~.bg {
  /*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png');*/
  transition: ease-in-out 0.5s;
}

.b:hover~.bg {
  /*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png');*/
  transition: ease-in-out 0.5s;
}

.c:hover~.bg {
  /*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png');*/
  transition: ease-in-out 0.5s;
}

.work>a:hover {
  color: #d55d5d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
  <a class="a" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png"> a
        </a>
  <a class="b" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png"> b
        </a>
  <a class="c" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png"> c
        </a>
  <div class="bg"> </div>
</div>

页面加载后触发悬停

1 个答案: