jQuery如何实现点击页面任意元素后仅对该元素执行淡入淡出或样式修改

你的代码存在两个核心问题：

• 调用了$(this).children().fadeOut()，实际操作的是被点击元素的所有子元素，而非点击元素本身
• 给所有DOM元素都绑定了点击事件，触发点击时事件会向上冒泡到所有父级元素，导致父级也会触发自身的点击回调，出现多个元素同时消失的问题

把你的点击事件代码替换为以下内容即可实现需求：

$('*').click(function(e) {
    // 阻止事件冒泡到父元素，避免父元素也触发点击回调
    e.stopPropagation();
    // 直接对当前点击的元素执行淡入淡出/样式修改操作
    $(this).fadeOut("slow");
    // 如果要修改样式直接操作$(this)即可，示例：
    // $(this).css("color","red");
});

如果你不希望点击<body>、<html>、全局容器这类元素时导致大面积页面消失，可以增加过滤判断：

$('*').click(function(e) {
    e.stopPropagation();
    // 排除不需要触发效果的全局容器元素
    if(!$(this).is('body,html,.container')){
        $(this).fadeOut("slow");
    }
});

你当前的hover事件只写了移入回调，鼠标移出后样式不会自动恢复，可以补全移出逻辑：

$("#lorem").hover(function () {
    // 鼠标移入的样式
    $(this).css({
        "background-color": "rgba(218, 243, 247, 0.5)",
        "color": "rgb(240, 119, 0)",
        "border-left": "5px solid #ccc",
        "font-size": "2em"
    });
}, function(){
    // 鼠标移出恢复默认样式
    $(this).css({
        "background-color": "transparent",
        "color": "inherit",
        "border-left": "none",
        "font-size": "inherit"
    });
});

内容的提问来源于stack exchange，提问作者JC_vd_Merwe_03