web-dev-qa-db-fra.com

afficher/masquer une div en survol et survoler

Je voudrais montrer et cacher une div pendant le vol stationnaire.

voici ce que j'ai fait ces derniers temps.

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>

Mon problème est que quand je survole le menu id, le div flyout clignote . Pourquoi?

jqueryhtmlcsshover
23
Tsukimoto Mitsumasa

Peut-être là pas besoin de JS. Vous pouvez également réaliser cela avec css. Écrivez comme ceci:

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

Pourquoi ne pas simplement utiliser .show()/.hide() à la place?

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

Voici différentes méthodes pour le faire. Et j'ai trouvé que votre code fonctionnait même très bien.

Votre code: http://jsfiddle.net/NKC2j/

Jquery toggle class demo: http://jsfiddle.net/NKC2j/2/

Jquery fade bascule: http://jsfiddle.net/NKC2j/3/

Jquery slide toggle: http://jsfiddle.net/NKC2j/4/

Et vous pouvez le faire avec CSS comme indiqué par Sandeep

15
SVS

J'ai trouvé que l'utilisation de l'opacité css est préférable pour un simple survol survol/masqué, et vous pouvez ajouter css3 transitions pour créer un effet de survol bien fini. Les transitions étant simplement abandonnées par les anciens navigateurs IE, elles se dégradent progressivement.

 

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

<div id="hover">Hover</div>
<div id="stuff">stuff</div>
3
Timothy
<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 devrait ressembler à ceci 

<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>
1
Krishna Vijay Bandarupalli

Vous pouvez utiliser jQuery pour afficher le div et le définir à l'endroit où se trouve votre souris:

html:

<!DOCTYPE html>
<html>

  <head>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>

  <body>
    <div id="trigger">
      <h1>Hover me!</h1>
      <p>Ill show you wonderful things</p>
    </div>
    <div id="secret">
     shhhh
    </div>
    <script src="script.js"></script>
  </body>

</html>

modes:

#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()
})

Vous pouvez trouver l'exemple ici Cheers! http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview

0
JohnCdf