Показать/скрыть div на hover и навести

Я хотел бы показать и скрыть div во время наведения и наведите указатель мыши.

вот что я сделал в последнее время.

CSS

.flyout{
position:absolute;
width:1000px;
height:450px;
background:red;
overflow: hidden;
z-index:10000;

}

.hidden{
visibility: hidden;

}

HTML

<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>

JavaScript/JQuery

$("#menu").hover(function(){
    $('.flyout').removeClass('hidden');
},function(){
    $('.flyout').addClass('hidden');
});

Моя проблема в том, что когда я наводил указатель на id меню, выпадающий div мигает. почему это?

Ответ 1

Может быть, нет необходимости в JS. Вы можете добиться этого также с помощью css. Напишите вот так:

.flyout{
position:absolute;
width:1000px;
height:450px;
background:red;
overflow: hidden;
z-index:10000;
display:none;
}
#menu:hover + .flyout{
 display:block;
}

Ответ 2

Почему бы просто не использовать .show()/.hide()?

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

Ответ 3

Вот несколько способов сделать это. И я нашел, что ваш код работает нормально.

Ваш код: http://jsfiddle.net/NKC2j/

Jquery toggle demo класса: http://jsfiddle.net/NKC2j/2/

JQuery fade toggle: http://jsfiddle.net/NKC2j/3/

Переключение слайдов Jquery: http://jsfiddle.net/NKC2j/4/

И вы можете сделать это с помощью CSS, на что ответил Sandeep

Ответ 4

<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>

ur 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>

Ответ 5

Я нашел, что css opacity лучше для простого show/hide hover, и вы можете добавить 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>