How to do a ' border onhover ' ?

programming
7

That’s sad .
Code below could work , except that it kills the :hover effect . Any idea why?
Thanks

<!DOCTYPE html>
<html>
<head>
<style>

p.borderShowTop
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
p.borderShowRight
{
  background-color: yellow;
  padding: 20px;
  display: none;
}
div {
   border-style: solid;
   border-color: green red blue pink;
   border-width: 12px 12px 1px 2px;
}
div:hover + p.borderShowTop{
  display: block;
}
</style>
</head>
<body>
<br><br>
<div contenteditable="true">
<img src="RedSquare.png" alt="" onclick="dragDiv()">
Hover over me! Contenteditable.
<img src="GreenSquare.png" alt="" onclick="changeWidthHeight()">
<p class="borderShowTop">I will show on hover</p>
</div>
<script>
function dragDiv() {
  alert("Start Dragging Dude!");
}
</script>
<script>
function changeWidthHeight() {
  alert("Width & Height has been changed!");
}
</script>
</body>
</html>