Свойство Hover относится к ребенку

Question

Добрый день, каждый, я пытаюсь применить свойство box-shadow к веб-странице, но если я применил эффект к нормальному состоянию, все будет хорошо, но в состоянии зависания, если я наведите курсор на ребенка, он применяется как к родительскому, так и к ребенку.

Нормальное состояние: все работает отлично состояние

парения: свойство применяется к каждому элементу в DIV

Я попытался с помощью 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; 
} 

Это мой сервлетов Java код:

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

Если вы хотите применить тень окна к элементу с классом myClmass, то селектор должен быть .myClmass:hover без пространства между .myClmass и :hover

Answer 2

Попробуйте pointer-events:none; на ваш дочерний элемент в вашем css