javascript - jQuery .hover change the css of an element that is not child

Question

I have been trying to make an element(A)'s display to block, when another element(B) has the mouse over it, and then return it to none after the mouse leaves A, here are my attempts so far:

First here's a part of the HTML

..
<ul>
<li class="firstli">
       <img class="userLogo" src="media/images/eSahara.jpg"><a href="">Configurer</a></li>
       <li><a href="" class="clear">Supprimer</a></li>
       <li><a href="logout">Déconnecter</a></li>
</ul>
      </li>                    
          </ul>
<div id="cimsgContainer"><p>Changer votre <br> image de profile</p></div>

and now my attempts

<script type="text/javascript">
$(".userLogo").mouseenter(function(){$("#cimsgContainer").css("display","block");});
$(".userLogo").mouseleave(function(){$("#cimsgContainer").css("display","none");});
</script>


<script type="text/javascript">
    $(".userLogo").hover(function(){$("#cimsgContainer").css("display","block");},function(){$(this).css("display","none");});
    </script>

Very important note: I already did my research and all I found is to change a child's CSS when the parent is hovered, in my case B is not a child of A neither is A a child of B. A's id = #cimsgContainer; B's id = #userLogo Thank you