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 に答える