CSS를 제외한 모든 것을 흐리게 처리합니다.

Question

세 개의 별도 카드가있는 세 개의 "카드"가 있습니다. 나는 "카드"중 하나 위에 마우스를 가져 가면 나머지 두 개는 흐려질 수 있지만, 한 개만 마우스로 가리키면됩니다.

Here's a codepen example: https://codepen.io/jacobkjones/pen/gXqpeB 

본인은 흐리게하는 방법을 알고,하지만 난 BOX1 위에 마우스를 올려 때마다 BOX2 및 box3이 흐려 곳으로 만드는 방법을 알고하지 않습니다. 나는 이것이 CSS만으로는 가능한지 확실치 않지만, JS없이 끝내기를 선호한다.

~ +와 같은 여러 CSS 선택기를 사용해 보았지만 원하는 결과를 제공하지 못했습니다.

도움을 주시면 감사하겠습니다.

Answer 1

CSS만으로는이 기능을 사용할 수 없습니다. there's no previous sibling selector in CSS 때문입니다.

<div class="container"> 
    <div id="box1" class="card"> 
    <h1>one</h1> 
    <p>some text here</p> 
    </div> 
    <div id="box2" class="card"> 
    <h1>two</h1> 
    <p>some text here</p></div> 
    <div id="box3" class="card"> 
    <h1>three</h1> 
    <p>some text here</p></div> 
</div> 

이 같은 선택에 #box1을 유혹 할 때 #box2 및 #box3를 선택할 수 있습니다 : 당신이 #box2 또는 #box3를 가져 가면

div[id^="box"]:hover ~ div[id^="box"] { 
    //blurry stuff 
} 

을하지만 일이

은 그래서이 마크 업을 부여? 마우스를 가져 가기 전에 상자를 변경할 수 없습니다.

우리는 거꾸로 생각하고 기본적으로 흐리게 처리 한 다음 간단한 :hover 선택기를 사용하여 사용자가 가리키고있는 것을 제거 할 수 있습니다. 그런 식으로 당신은 당신이 떠오르지 않은 사람으로 끝나지 만, 상자가 정상적으로 보이지 않기 때문에 당신이 원하는 것이 아닙니다.

다음은 jQuery의 .not()을 사용하여 작동하는 간단한 방법의 예입니다. 원하는 경우 CSS를 함수에 넣는 대신 클래스를 토글하여 흐리게 처리 할 수 ​​있습니다.

$(function(){ 
 
    var boxes = $('div[id^="box"]'); 
 
    $(boxes).on('mouseenter', function(){ 
 
    $(boxes).not($(this)).css('background-color', 'red'); 
 
    }).on('mouseleave', function(){ 
 
    $(boxes).css('background-color', 'initial'); 
 
    });; 
 
});

.container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    justify-content: space-between; 
 
} 
 
.card { 
 
    border: solid black 1px; 
 
    padding: 20px; 
 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
} 
 
body { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="box1" class="card"> 
 
    <h1>one</h1> 
 
    <p>some text here</p> 
 
    </div> 
 
    <div id="box2" class="card"> 
 
    <h1>two</h1> 
 
    <p>some text here</p></div> 
 
    <div id="box3" class="card"> 
 
    <h1>three</h1> 
 
    <p>some text here</p></div> 
 
</div>

---

최종 참고 : 헤더 태그를 수정해야합니다. 두 번째 및 세 번째 헤더의 경우 시작 태그는 <h1> 개이고 닫는 태그는 </h2> 개입니다.