css - 将鼠标悬停在 div 内的 span 上，显示其他元素

Question

我希望当鼠标悬停在 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>

Answer 1

您可以为此使用javascript。这是您的问题的代码：

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

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

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

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