30

ホバーとホバーアウト中にdivを表示および非表示にしたいと思います。

これが私が最近やったことです。

CSS

$("#menu").hover(function() {
  $('.flyout').removeClass('hidden');
}, function() {
  $('.flyout').addClass('hidden');
});
.flyout {
  position: absolute;
  width: 1000px;
  height: 450px;
  background: red;
  overflow: hidden;
  z-index: 10000;
}

.hidden {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="menu" class="margint10 round-border">
  <a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a>
</div>
<div class="flyout hidden">&nbsp;</div>

私の問題は、メニュー ID にカーソルを合わせると、フライアウト div が点滅することです。何故ですか？

4

6 に答える 6

34

.show()/.hide()代わりに使用しないのはなぜですか？

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});
于 2012-06-20T07:15:06.603 に答える
32

JSは必要ないかもしれません。cssでもこれを実現できます。次のように書きます。

.flyout {
    position: absolute;
    width: 1000px;
    height: 450px;
    background: red;
    overflow: hidden;
    z-index: 10000;
    display: none;
}
#menu:hover + .flyout {
    display: block;
}
于 2012-06-20T07:14:58.307 に答える
16

これを行う別の方法を次に示します。そして、あなたのコードがうまく機能していることもわかりました。

あなたのコード: http://jsfiddle.net/NKC2j/

Jquery トグル クラスのデモ: http://jsfiddle.net/NKC2j/2/

Jquery フェード トグル: http://jsfiddle.net/NKC2j/3/

Jquery スライド トグル: http://jsfiddle.net/NKC2j/4/

Sandeepが回答したように、CSSでこれを行うことができます

于 2012-06-20T07:25:31.733 に答える
3

css opacity を使用すると、単純な表示/非表示のホバーに適していることがわかりました。css3トランジションを追加して、素敵な完成したホバー効果を作成できます。トランジションは古い IE ブラウザーによってドロップされるだけなので、正常に低下します。

JS フィドルのデモ

CSS

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

HTML

<div id="hover">Hover</div>
<div id="stuff">stuff</div>
于 2014-11-30T00:12:25.733 に答える
1 
<script type="text/javascript">
    var IdAry=['reports1'];
    window.onload=function() {
     for (var zxc0=0;zxc0<IdAry.length;zxc0++){
      var el=document.getElementById(IdAry[zxc0]);
      if (el){
       el.onmouseover=function() {
         changeText(this,'hide','show')
        }
       el.onmouseout=function() {
         changeText(this,'show','hide');
        }
      }
     }
    }
    function changeText(obj,cl1,cl2) {
       obj.getElementsByTagName('SPAN')[0].className=cl1;
       obj.getElementsByTagName('SPAN')[1].className=cl2;
    }
</script>

あなたのhtmlはこのように見えるはずです

<p id="reports1">
                <span id="span1">Test Content</span>
                <span class="hide">

                    <br /> <br /> This is the content that appears when u hover on the it
                </span>
            </p>
于 2012-06-20T07:36:45.270 に答える