Css 将光标悬停在div内的span上，显示其他元素

我希望当鼠标悬停在span id='requestSent'时显示div id='cancelReq'

我试过这个代码，但不起作用

<style> 
    #cancelReq {
         display: none;
    }

    #requestSent:hover + #cancelReq { 
         display: block;
    }   
</style>

<div id='addUser'>
     <span id='requestSent'>Add Friend</span>
</div>
<div id='cancelReq' >hello there</div>

#取消请求{
显示：无；
}
#requestSent:hover+#cancelReq{
显示：块；
}   
加朋友
你好

您可以使用javascript实现这一点。 以下是解决问题的代码：

<script type="text/javascript">
     function fun(){
         document.getElementById("cancelReq").style.display = "block";
     }

     function fun1(){
         document.getElementById("cancelReq").style.display = "none";
     }
</script>

函数fun（）{
document.getElementById（“cancelReq”）.style.display=“block”；
}
函数fun1（）{
document.getElementById（“cancelReq”）.style.display=“无”；
}

并使您的HTML代码如下所示：

<div id='addUser'><span id='requestSent' onmouseover="fun();" onmouseout="fun1();" >Add Friend</span></div>
<div id='cancelReq' >hello there</div>

添加好友
你好