hover on link change background image

Question

I am trying to hover on a link to change the image in div using Adjacent Sibling Selector, but it does not show anything when I hover on the link.

<!DOCTYPE HTML>
<html>
<head>

<link rel="stylesheet" href="styletest.css">    
</head>
<body>
<div>

    <a class="a" href="/template-1978944/editor"> ANATOMY NOW
    </a>

    <div class="bg"> </div>

</div>   
</body>
</html>

CSS:

.bg{
 height:100%;
}

.a:hover + .bg {
 background-image: url('https://preview.ibb.co/gce5me/anatomy_Now.png');
}

I works but div .bg has zero height by default. – Stickers Sep 19 '18 at 14:44 — Stickers, Sep 19 '18 at 14:44
I change the height of .bg in css and it works now – bloobit Sep 19 '18 at 14:49 — bloobit, Sep 19 '18 at 14:49

score 1 · Answer 1 · answered Sep 19 '18 at 14:56

1

You can also use height:100vh;if you need to fill the background of the viewport

answered Sep 19 '18 at 14:56

mkk

56
5

hover on link change background image

1 Answers1