Css 将鼠标悬停在图元上时取消隐藏图元

需要一点CSS帮助！我想在悬停另一个元素时取消隐藏该元素

例如：

<div class="Welcome"><a>Welcome to our site<a><div>
<div class="Message">Thanks for touching me!<div>

---

当您将鼠标悬停在

上时，这确实是您能得到的最好结果。欢迎
。将显示消息
。这将使用相邻的同级选择器

。消息{
显示：无；
}
。欢迎：悬停+。信息{
显示：块；
}

使用一点jQuery，这真的很容易

CSS

​div.Message{
    display:none;
}​

HTML

<div class="Welcome">Welcome to our site<div>
<div class="Message">Thanks for touching me!<div>

示例：

编辑

来回答你下面的问题

您需要将以下内容添加到页面中，通常在
部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>



及


$（文档）.ready（函数（）{
$（'.Welcome'）。悬停(
函数（）{
$（'.Message'）.show（）；
}, 
函数（）{
$（'.Message'）.hide（）；
}
);
});
您可能应该使用JavaScript，因为这可能会有所帮助。是的，
.js
将是最简单和更具功能的。就跨浏览器支持而言，这是如何实现的？根据chrome、ff、opera、safari、IE7+的说法，谢谢，我发现这是一个额外的参考。。。虽然列出的浏览器看起来很过时。嘿，这不起作用。为了得到一个更好的主意，我正试图用我网站的特色区域来做这件事。链接：.recentpost-1img:hover+。内容标题{display:block；}。内容标题{display:none；}@lavanyarora使用此
。recentpost-1a:hover+。内容标题{display:block；}。内容标题{display:none；}
取而代之，因为
。内容标题
相邻的同级是
a
。我应该在哪里插入此jQuery？我还建议使用jQuery。
$('.Welcome').hover(
    function () {
    $('.Message').show();
  }, 
    function () {
    $('.Message').hide();
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 <script>
     $(document).ready(function(){
        $('.Welcome').hover(
            function () {
        $('.Message').show();
          }, 
            function () {
        $('.Message').hide();
          }
        );
     });
 </script>