My Div background is not turning blue when I hover a specific bullet line

Question

I want the div background to be blue when I hover Line 2.

I have also tried adding a class for the second li, but it was not working. Is there anything I have missed out?

ul {
  font-size: 2em;
}

div {
  background: pink;
  width: 200px;
  height: 200px;
  font-size: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul li:nth-child(2):hover + div {
  background: blue;
}

<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>    
</ul>

<div>2</div>