jQuery .mouseover() (.mouseout) div scintille

j'ai un problème avec ce code (j'ai fait un jsfiddle http://jsfiddle.net/r2y8J/).

$(document).ready(function() {
 /*$(".bulletProj").mouseenter(function () {
     console.log("You're Over!");
     $(".caption").animate(
        {top: "0px"},
        300, function() {
            console.log("i slided");
        });
    });
    $(".bulletProj").mouseleave(function() {
    $(".caption").animate(
        {top: "-200px"},
        300, function() {
            console.log("i left");
        });
    });*/
    $(".bulletProj").mouseenter(function() {
       console.log("mous is over");
       $(".caption").toggle();
    }).mouseleave(function () {
       console.log("mous leaves");
       $(".caption").toggle();
  });
});

Partie du code est commenté depuis que j'ai essayé de plusieurs façons.

Ce que je veux faire est d'avoir un div avec du texte et un bg de l'image, et lorsque la souris est sur un autre div doit slideDown avec un bouton. Le problème est que j'ai essayé .passage de la souris .mouseout, .mouseeneter et .mouseleave mais il garder le scintillement. J'ai constaté que lorsque je suis sur le texte, il s'arrête, mais si je suis dans un espace vide de la div, il continue de scintillement.
Quelqu'un a une idée?
Merci beaucoup.

La Cause de votre div .la légende prend le focus, donc il trigge mouseleave sur votre div bulletproj

OriginalL'auteur Commax89 | 2013-09-02

10

essayez ceci:
```
$(document).ready(function() {  
    $(".bulletProj,.caption").mouseenter(function() {              
         $(".caption").toggle();        
    }).mouseleave(function () {     
        $(".caption").hide();
    });
});
```
de travail violon ici: http://jsfiddle.net/r2y8J/4/

J'espère que cela aide.

Hey cela fonctionne vraiment bien. Je vous remercie. Une seule question, pourquoi dans le premier sélecteur avez-vous donné à la fois l' .bullProj et la . légende de la classe?
effet de scintillement est de montrer, parce que vous laissez bulletProj il permet de basculer le .légende tout en vous debout sur .la légende. Donc, vous devez lier passage de la souris sur la légende trop facile de cacher/montrer

OriginalL'auteur maverickosama92
2

Vous pouvez facilement utiliser
```
.caption{pointer-events:none}
```
http://jsfiddle.net/r2y8J/5/

Pointeur-events est une belle façon de faire le travail. Mais sachez que tout texte / lien dans votre légende seront unselectable / unclickable.

OriginalL'auteur Romaindr

De l'essayer.

$(".bulletProj").mouseenter(function() {
        console.log("mous is over");
        $(".caption").toggle();
    }).mouseleave(function () {
        console.log("mous leaves");
        stopImmediatePropagation();
        $(".caption").toggle();

    });

OriginalL'auteur Ajoshi

J'ai été confronté à un problème similaire, dans mon cas, j'ai utilisé css: opacity comme ci-dessous pour arrêter le clignotement

css:

.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}

JQuery:

$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
    console.log("mous is over");
    $(".caption").css('opacity','1');
}).mouseleave(function () {
    console.log("mous leaves");
    $(".caption").css('opacity','0');
});

De travail Violon

OriginalL'auteur Greenhorn

var caption = $(".caption");
$(".bulletWrapper").hover(function(){
    console.log("mous is over");
    caption.toggle();
}, function(){
    console.log("mous leaves");
    caption.toggle();
});

$(".bulletWrapper").bind("mouseenter mouseleave", function(){
    $(".caption").toggle();
});

OriginalL'auteur CronosS

Vous devez vous connecter pour publier un commentaire.