호버 속성은 자식에게 적용

Question

안녕하세요 모두, 웹 페이지에 box-shadow 속성을 적용하려고했지만 일반적인 상태로 적용하면 모든 것이 잘 작동하지만 마우스를 가리면 호버 상태가됩니다. 그것은 부모와 자식 모두에게 적용됩니다.

정상 상태 : 다 잘

가져가 상태를 작동 : 속성이 사업부

나는 상태를 전환 할 수 Jquery를 사용하여 시도했지만 작동하지 않는 각 요소에 적용됩니다.

HTML

<div class="results"> 
    <div class="result_wrapper"> 
    <div class="result"> 
     <h2 class="single"><a href="#"><font size="4dp">A title</font></a></h2> 
     <div class="single">shortDiscription</div> 
    </div> 
    </div> 
</div> 

CSS

.result { 
    background-color: #fff0f0; 
    padding: 5px; 
    margin: 1%; 
    width: 600px; 
    box-shadow: 2px 2px 5px grey; 
    transition: all 0.5s ease; 
} 

.myClmass :hover { 
    display: block; 
    box-shadow: 2px 2px 5px grey; 
    transition: all 0.5s ease; 
} 

.singleHover { 
    all: revert; 
} 

.results { 
    float: left; 
} 

.vid { 
    float: right; 
    margin: 1%; 
} 

.vidHeader { 
    background-color: #d69797; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-right: 400px; 
    padding-left: 5%; 
    text-align: center; 
} 

이 내 자바 서블릿 코드 :

out.println("<div class=\"results\">"); 
       for(Element post : results){ 
        String link = post.childNode(0).childNode(0).absUrl("href"); 
        String title = post.getElementsByTag("a").text(); 
        String shortDiscription = post.getElementsByClass("b_caption").get(0).child(1).toString(); 
        out.println("<div class=\"result_wrapper\" >"); 
        out.println("<div class=\"result\">"); 
        out.println("<h2 class=\"single\"><a href=\""+link+"\"><font size=\"4dp\">"+title+"</font></a></h2>"); 
        out.println("<div class=\"single\">"+shortDiscription+"</div>"); 
        out.println("</div></div>"); 
       } 
       out.println("</div>"); 

Answer 1

셀렉터 .myClmass :hover은 규칙이 마우스가 실제로 끝나는 곳인 myClmass 클래스를 가진 요소의 모든 자손 요소에 적용됨을 의미합니다. 그래서 규칙은 .myClmass 및 :hover 사이의 공간이없는 myClmass 다음 셀렉터 .myClmass:hover 수있는 클래스 요소에있는 상자 그림자를 적용 할 경우 클래스 myClmass

를 가진 요소 내에있는 모든 요소에 적용됩니다

Answer 2

이 pointer-events:none을 시도; 귀하의 CSS에 귀하의 자녀 요소에