MouseEnter und mouseleave funktioniert nicht

Ich versuche mit mouseenter und mouseleave den Hintergrund eines Symbols zu ändern, aber es ist wirklich bugger. Wenn ich den Mauszeiger über das Symbol halte, ändert sich der Hintergrund, wenn ich meine Maus aus dem Hintergrund entferne, sollte der Hintergrund wieder normal werden, manchmal jedoch nicht. Kann jemand helfen?MouseEnter und mouseleave funktioniert nicht

Mein Code:

catItem$.on('mouseenter', function (e) { 
    e.preventDefault(); 
    var target$ = $(e.currentTarget), 
     newCategory = target$.attr('data-dest'), 
     newCategoryItem = this.categories[newCategory]; 
    if (newCategory.isClicked) { 
     return; 
    } 
    target$.find('.cat-icon').addClass('is-selected'); 
    target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + ')'); 
}.bind(this)); 

catItem$.on('mouseleave', function (e) { 
    e.preventDefault(); 
    var target$ = $(e.currentTarget), 
     newCategory = target$.attr('data-dest'), 
     newCategoryItem = this.categories[newCategory]; 

    if (!newCategoryItem.isClicked) { 
     target$.find('.cat-icon').removeClass('is-selected'); 
     target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.darkIconImageURL + ')'); 
    } 
}.bind(this));

Ich kann nicht CSS verwenden, da das Hintergrundbild auf schweben dynamisch ist.

Quelle

2016-04-27 J K

so von einem Zugänglichkeit Standpunkt, wie würde jemand, der nicht in der Lage ist, eine Maus zu verwenden, um die Bilder ansehen? – zzzzBov

Versuchen Sie diesen Code ohne die Bedingungen vielleicht verstehen, was falsch läuft:

catItem$.on('mouseenter', function (e) { 
    e.preventDefault(); 
    var target$ = $(e.currentTarget), 
     newCategory = target$.attr('data-dest'), 
     newCategoryItem = this.categories[newCategory]; 
    target$.find('.cat-icon').addClass('is-selected'); 
    target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + ')'); 
}.bind(this)); 

catItem$.on('mouseleave', function (e) { 
    e.preventDefault(); 
    var target$ = $(e.currentTarget), 
     newCategory = target$.attr('data-dest'), 
     newCategoryItem = this.categories[newCategory]; 
    target$.find('.cat-icon').removeClass('is-selected'); 
    target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.darkIconImageURL + ')'); 
}.bind(this));

Edit: unter der Annahme, dass manchmal der Code funktioniert und plötzlichen Stopps
EDIT2: Vielleicht kann das Browser sein Cache, versuch:
var d = new Date(); 
var n = d.getTime(); 
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + '?=' + d + ')'); 

Quelle

2016-04-27 13:59:57 IonS

Wenn Sie nur möchten, dass sich der Hintergrund beim Hover ändert, haben Sie darüber nachgedacht, dies mit CSS anstatt mit JavaScript zu tun?

#item { 
    background-image: url(someImage); 
} 
#item:hover { 
    background-image: url(someOtherImage); 
}

Quelle

2016-04-27 14:01:12 Aember

nein das Bild bg ist dynamisch von db. kann nicht verwenden css –

-1

Bitte sehen Sie dieses Beispiel

var i = 0; 
 
$(".overout") 
 
    .mouseover(function() { 
 
    i += 1; 
 
    $(this).find("span").text("mouse over x " + i); 
 
    }) 
 
    .mouseout(function() { 
 
    $(this).find("span").text("mouse out "); 
 
    }); 
 

 
var n = 0; 
 
$(".enterleave") 
 
    .mouseenter(function() { 
 
    n += 1; 
 
    $(this).find("span").text("mouse enter x " + n); 
 
    }) 
 
    .mouseleave(function() { 
 
    $(this).find("span").text("mouse leave"); 
 
    });

.out { 
 
    width: 40%; 
 
    height: 120px; 
 
    margin: 0 15px; 
 
    background-color: #d6edfc; 
 
    float: left; 
 
} 
 

 
.in { 
 
    width: 60%; 
 
    height: 60%; 
 
    background-color: #fc0; 
 
    margin: 10px auto; 
 
} 
 

 
p { 
 
    line-height: 1em; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="out overout"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 
    <div class="out enterleave"> 
 
    <span>move your mouse</span> 
 
    <div class="in"> 
 
    </div> 
 
    </div> 
 

 

 
</body>

Quelle

2016-04-27 14:09:02 Nicholas

wo, s das beispiel? –

Nur Link-Antworten sind keine Antworten. Bitte erläutern Sie dies oder ändern Sie dies als Kommentar. – zzzzBov

Ups: D. Ich habe die Antwort bearbeitet – Nicholas

MouseEnter und mouseleave funktioniert nicht

Antwort

Verwandte Themen