대상 (hover) 클래스를 대상 풀에 추가합니다. 제외 된 요소가 아닌 대상 풀에 추가합니다.

Question

사이트 전체에 걸쳐 여러 요소가 있으며, 커서를 가져 가면 해당 요소 위로 흐리게 표시됩니다. 초점을 맞춘 요소 만 남겨 둡니다.

더 짧은 방법은 무엇입니까?

$(function() { 
    $('#a').hover(function() { 
    $('#b, #c, #d, #e').addClass("blur"); 
    }, function() { 
    $('#b, #c, #d, #e').removeClass("blur"); 
    }), 

    $('#b').hover(function() { 
    $('#a, #c, #d, #e').addClass("blur"); 
    }, function() { 
    $('#a, #c, #d, #e').removeClass("blur"); 
    }), 

    $('#c').hover(function() { 
    $('#a, #b, #d, #e').addClass("blur"); 
    }, function() { 
    $('#a, #b, #d, #e').removeClass("blur"); 
    }), 

    $('#d').hover(function() { 
    $('#a, #b, #c, #e').addClass("blur"); 
    }, function() { 
    $('#a, #b, #c, #e').removeClass("blur"); 
    }), 

    $('#e').hover(function() { 
    $('#a, #b, #c, #d').addClass("blur"); 
    }, function() { 
    $('#a, #b, #c, #d').removeClass("blur"); 
    }); 
}); 

감사합니다 : :이 바보 같은 코드를 내놓았다>!

Answer 1

$('.my-class').hover(function() { 
    $('.my-class').not(this).addClass('blur'); 
}, function() { 
    $('.my-class').removeClass('blur'); 
}); 

http://jsfiddle.net/isherwood/7VzBf/

Answer 2

당신은 :not -selector 및 CSS Filters를 사용하여 CSS와 함께이 작업을 수행 할 수 있습니다.

HTML :

<div></div> 
<div></div> 
<div></div> 

CSS :

div:not(:hover) { 
    blur(1px); 
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    -ms-filter: blur(2px); 
    -o-filter: blur(2px); 
    filter: blur(2px); 
} 

http://codepen.io/anon/pen/zHxGn

이 공중 선회되지 않는 모든 요소를 ​​선택하고 CSS 필터를 사용하여 흐리게합니다. 해당 솔루션의 문제점은 현재 브라우저 지원이 상당히 제한적이라는 것입니다. http://caniuse.com/#feat=css-filters

광범위한 지원을 받으려면 안개가 필요합니다.
http://nbartlomiej.github.io/foggy/

당신은 그런 식으로 그것을 사용할 수 있습니다

// Set up blur on each element 
$('div').foggy({blurRadius: 2, opacity: 1}); 

$('div').hover(function() { 
    // Delete blur on mouseenter 
    $(this).foggy(false); 
}, function() { 
    // Blur again on mouseout 
    $(this).foggy({blurRadius: 2, opacity: 1}) 
}); 

http://codepen.io/anon/pen/yIotA

---

편집 :

당신이 그들 중 하나 위에 마우스를 올려 때까지 당신이 당신의 요소가 흐릿하지 않은하려는 경우, 이렇게 할 수 있습니다.

$('div').hover(function() { 
    // Blur every other element on mouse enter 
$('div:not(:hover)').foggy({blurRadius: 2, opacity: 1}); 
}, function() { 
    // Delete Blur on mouse out 
    $('div').foggy(false); 
}); 

http://codepen.io/anon/pen/DJCBI