show hide a div on hover and hover out

Question

I would like to show and hide a div during hover and hover out   here s what I ve done lately   css   x000D   x000D      menu   hover function     x000D        flyout   removeClass  hidden    x000D     function     x000D        flyout   addClass  hidden    x000D      x000D   flyout   x000D    position  absolute  x000D    width  1000px  x000D    height  450px  x000D    background  red  x000D    overflow  hidden  x000D    z-index  10000  x000D    x000D   x000D   hidden   x000D    visibility  hidden  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 0 jquery min js  gt  lt  script gt  x000D   lt div id  menu  class  margint10 round-border  gt  x000D     lt a href     gt  lt img src  images menu jpg  alt    id  menu link    gt  lt  a gt  x000D   lt  div gt  x000D   lt div class  flyout hidden  gt  amp nbsp  lt  div gt  x000D   x000D   x000D    My problem is that when I hover on the menu id  the flyout div is blinking  why is that

User · Answer

Here are different method of doing this  And i found your code is even working fine   Your code  http   jsfiddle net NKC2j   Jquery toggle class demo  http   jsfiddle net NKC2j 2   Jquery fade toggle  http   jsfiddle net NKC2j 3   Jquery slide toggle  http   jsfiddle net NKC2j 4   And you can do this with CSS as answered by Sandeep

User · Answer

May be there no need for JS  You can achieve this with css also  Write like this    flyout       position  absolute      width  1000px      height  450px      background  red      overflow  hidden      z-index  10000      display  none     menu hover    flyout       display  block

User · Answer

You could use jQuery to show the div  and set it at wherever your mouse is   html    lt  DOCTYPE html gt   lt html gt      lt head gt       lt link href  style css  rel  stylesheet    gt       lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt     lt  head gt      lt body gt       lt div id  trigger  gt         lt h1 gt Hover me  lt  h1 gt         lt p gt Ill show you wonderful things lt  p gt       lt  div gt       lt div id  secret  gt       shhhh      lt  div gt       lt script src  script js  gt  lt  script gt     lt  body gt    lt  html gt    styles    trigger     border  1px solid black     secret     display none    top 0      position absolute    background  grey    color white    width  50       js       trigger   hover function e           secret   show   css  top   e pageY    px   css  left   e pageX    px        function e           secret   hide        You can find the example here Cheers  http   plnkr co edit LAhs8X9F8N3ft7qFvjzy p preview

User · Answer

lt script type  text javascript  gt      var IdAry   reports1        window onload function          for  var zxc0 0 zxc0 lt 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         lt  script gt    ur html should look like this    lt p id  reports1  gt                   lt span id  span1  gt Test Content lt  span gt                   lt span class  hide  gt                        lt br   gt   lt br   gt  This is the content that appears when u hover on the it                  lt  span gt               lt  p gt

User · Answer

I found using css opacity is better for a simple show hide hover  and you can add css3 transitions to make a nice finished hover effect  The transitions will just be dropped by older IE browsers  so it degrades gracefully to   JS fiddle Demo  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   lt div id  hover  gt Hover lt  div gt   lt div id  stuff  gt stuff lt  div gt

User · Answer

Why not just use  show    hide   instead       menu   hover function            flyout   show      function            flyout   hide

[jquery] show/hide a div on hover and hover out

Examples related to jquery

Examples related to html

Examples related to css

Examples related to hover