如何实现鼠标移入或移出使元素显示或隐藏

在程序的页面中，页面可能涉及很多方面的功能，可能需要隐藏起来，当鼠标移动到特定的位置时，使其功能显示出来或已经显示的功能的剩下功能显示，当鼠标移出特定位置或区域时，使其隐藏。
例如：
1，某些网站上的购物车，当鼠标移入购物车图标时，他会显示一个框，来提示你的购物车里面已有的商品。
2，在QQ PC版的主页面中，当鼠标移入到我们的头像时，会提示我们的一些基础信息，点击时再跳转到详细信息页面。

这些现象用编程语言来描述的话：鼠标移入元素显示：鼠标移出元素隐藏。
实现这些基础功能可以用：
（1）CSS3中的hover伪类属性：
（2）javaScript中的鼠标移入事件和鼠标移出事件：
（3）jQuery 中的鼠标移入事件和鼠标移出事件：
（4）jQuery中的hover（）方法：
目前只会这四种，如有其它请诸位前辈教导。
jQuery 需要引入脚本文件：

<div class="container"> 
        <div class="Moveout" id="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">
            <h5>移入显示/移出隐藏</h5>
            <div class="contenter" id="content">
                <h5>你的酒馆对我打了烊</h5>
                <h5>最近</h5>
                <h5>刚好遇见你</h5>
                <h5>一曲相思</h5>
                <h5>心如止水</h5>
                <h5>绿色</h5>
                <h5>我就是一张白纸</h5>
            </div>
        </div>        
    </div>

content已在css样式中隐藏：（dispaly:none;）

（1）CSS3中的hover伪类属性：

 .Moveout:hover #content{
             display:block;
 }

提问：使用Css3的hover属性同级元素是否能使用。
我尝试了一下发现，要使用Css3的hover属性是元素显示或隐藏，两个元素需要存在上下级的关系能使用。
而两个不存在上下级关系的同级元素，无法使用Css3的hover属性。
不知是否正确，请诸位前辈教导。
（2）javaScript中的鼠标移入事件和鼠标移出事件：
鼠标移入事件：onmouseover
鼠标移出事件：onmouseout

  javascript 
        var Moveout = document.getElementById("Moveout");
        var content = document.getElementById("content");
        //鼠标移入显示
        Moveout.onmouseover = function () {
            content.style.display = "block";
        }
        function Moveoutsover() {
            content.style.display = "block";
        }
        //鼠标移出隐藏
        Moveout.onmouseout = function () {
            content.style.display = "none";
        }              
        function MoveoutSout() {
            content.style.display = "none";
        }

onmouseover和onmouseout方法也可以直接在相对应元素上定义其方法的名，但还需写方法体：
（3）jQuery 中的鼠标移入事件和鼠标移出事件：
鼠标移入事件：mouseenter
鼠标移出事件：mouseleave
引入jQuery脚本：

 <script src="~/Plugins/jquery-3.2.1.min.js"></script>

        //jQuery
        //鼠标移入显示
        $("#Moveout").mouseenter(function () {
           //$("#content").show();
            $("#content").css("display", "block");
        })
       
        //鼠标移出隐藏
        $("#Moveout").mouseleave(function () {
            //$("#content").hide();
            $("#content").css("display", "none");
        })

jQuery 中使元素显示和隐藏的方法：
显示可以用：show()或 .css(“display”, “block”);
隐藏可以用：hide()或 .css(“display”, “none”);
（4）jQuery中的hover（）方法：
hover()方法是模仿光标（鼠标）悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

 //jQuery的hover
        $("#Moveout").hover(
            function(){
                $("#content").show();
            },
            function () {
                $("#content").hide();
            }
        )

javaScript和jQuer的鼠标移入事件和鼠标移出事件及jQuery中的hover（）方法，无需上下级关系：
除了可以实现元素的显示和隐藏，还可以实现很多的功能。
例如：改变元素的样式，元素的背景，字体大小，弹出提示等等，
涉及样式的改变，会涉及css，style的样式关键字。
可能可以实现鼠标移入或移出元素显示或隐藏的方法还有很多，只是我目前只会这四种方法，
如有其它方法，还请诸位前辈教导：