Hover triggered after page load - html

Question

I tried to build a website when you hover on the link the bg will change. Is there a way to trigger the hover effect of the link "a" after the page is loaded?
.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

Here is a solution using jQuery, which is a package that is built on top of JavaScript. The solution works by using a data attribute to dynamically set the background-image url for the element when an a tag is hovered over. When the you move your cursor away from the a tag, it will reset the background-image to the default address.
$(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>