Mouseover - Mouseout - JavaScript
-
02-10-2019 - |
سؤال
ما أحاول القيام به:
عندما يحوم المستخدم على صورة ، يجب أن تظهر X (صورة) صغيرة في الزاوية اليمنى العليا. إذا انقر المستخدم على هذا X الصغير ، فيجب حذف الصورة وعندما يقوم المستخدم بعمل ماوس ، يجب أن يخفضت X Little X. لقد جربت عدة أشياء:
هيكل HTML هو UL مع LI وصورة فيه
JavaScript:
//On all the li's in the ul
$("li",$flickrKeyUlPreview).mouseover(addExternalImage);
var addExternalImage = function(){
//Get the offset of the image the user is hovering over
var offset = $(this).offset();
//Move the little x button to the image
$flickrDetailButton.offset(offset);
//Set it visible
$flickrDetailButton.css("visibility","visible");
//Bind the event for the mouseout
$flickrDetailButton.mouseout(removeExternalButton);
};
var removeExternalButton = function(){
//Hide the little x
$flickrDetailButton.css("visibility","hidden");
};
السبب في ذلك لا يعمل: عندما يحوم المستخدم فوق الصورة الصغيرة ، يتم تشغيل Mouseover.
لقد حاولت أيضًا:
$("li",$flickrKeyUlPreview).mouseover(addExternalImage);
var addExternalImage = function(){
$(this).unbind('mouseover');
var emptyObject = {};
$(this).append($.TemplateRenderer($flickrDetailButton,emptyObject));
$flickrDetailButton = $('#flickr_detail_button',rootel);
$(this).mouseout(removeExternalButton);
};
var removeExternalButton = function(){
$(this).unbind('mouseout');
$flickrDetailButton = $('#flickr_detail_button',rootel);
if ($($flickrDetailButton, $(this))) {
$($flickrDetailButton, $(this)).remove();
}
$(this).mouseover(addDelBtn);
};
This doesn't work that well, the little x starts flickering.
حاول هذا أيضًا:
$("li",$flickrKeyUlPreview).mouseenter(addExternalImage);
var removeExternalButton = function(){
$flickrDetailButton = $('#flickr_detail_button', rootel);
if ($($flickrDetailButton, $(this))) {
$($flickrDetailButton, $(this)).remove();
}
$(this).mouseenter(addExternalImage);
};
var addExternalImage = function(){
var emptyObject = {};
$(this).append($.TemplateRenderer($flickrDetailButtonTemplate,emptyObject));
$flickrDetailButton = $('#flickr_detail_button',rootel);
$(this).mouseout(removeExternalButton);
$flickrDetailButton.mouseleave(removeExternalButton);
};
هذا أعطى نفس التأثير ، كان لا يزال يتخبط
هل لدى أي شخص فكرة أخرى عن كيفية القيام بذلك (لا تحتاج إلى رموز محددة ، يتم تقدير المفاهيم أيضًا ؛))؟
المحلول
$ ('Selector'). hover (addexternalImage ، removeExternalButton) ؛
نصائح أخرى
يحل محل mouseover
و mouseout
مع mouseenter
و mouseleave
.
لا تنتمي إلى StackOverflow