2

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

例如：

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

CSS

.Message {
    display: hidden
}

.Welcome a: hover {
/*I want to make .Message visible now. Any ideas?*/
}
4

3 回答 3

6

.Welcome .Message当您将鼠标悬停在显示时，这确实是您可以获得的最佳效果。这使用相邻的兄弟+选择器。

.Message {
    display: none;
}

.Welcome:hover + .Message {
    display:block;
}

http://jsfiddle.net/mowglisanu/ZPVSU/

于 2012-07-29T02:32:28.067 回答
1

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

CSS

​div.Message{
    display:none;
}​

HTML

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

jQuery

$('.Welcome').hover(
    function () {
    $('.Message').show();
  }, 
    function () {
    $('.Message').hide();
  }
);

示例：http: //jsfiddle.net/gxn34/

编辑

在下面回答您的问题

您需要将以下内容添加到您的页面，通常在该<head>部分

<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>
于 2012-07-29T02:34:05.620 回答
0 
.Welcome a: hover {
  display: block;
}
于 2012-07-29T02:31:33.813 回答