我有一个奇怪的但在 Webkit 浏览器上混合了 CSS3/HTML5/Javascript(虽然没有尝试过其他任何东西)。
试试这个小提琴:http: //jsfiddle.net/tbergeron/XHQxH/
尽可能快地将鼠标悬停在多个“图块”上,您会发现它有时会停止工作。
javascript代码是:
$('.tile').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
var tile = this;
// Hide Title label
$(tile).find('.title').hide();
var bigTileHtml = '<div class="bigTile">';
bigTileHtml = bigTileHtml + '<div class="title">Tile Title Holy Cow Yeah</div>';
bigTileHtml = bigTileHtml + '<div class="description">Tile description goes here.</div>';
bigTileHtml = bigTileHtml + '</div>';
// Create a new bigTile
var bigTile = $(bigTileHtml).appendTo('.tiles');
// Sets bigTile's position
var position = $(this).position();
bigTile.css('top', position.top + 4);
bigTile.css('left', position.left + 4);
bigTile.mouseout(function() {
// Show Title label
$(tile).find('.title').show();
bigTile.remove();
});
bigTile.show();
});
对于 HTML/CSS(这对诊断不太有用),请检查我在那里链接的小提琴。
编辑:问题似乎是“webkitTransitionEnd”只被触发一次。所以下次过渡结束时,什么都不会被调用。我想知道:有没有办法重置此行为,以便在它结束时重置并可以再次触发?
所以要恢复,当您多次将鼠标悬停在许多瓷砖上时,它会停止显示粉红色的 div。
感谢任何可以花一些时间帮助我的人的帮助。
/汤米