Collins Collins - 1 year ago 62
CSS Question

Hover property applies to child

Good day everyone, i have been trying to apply

property to a webpage but if i apply the effect to the normal state, everything works fine but on the hover state, if i hover on the child, it applies to both the parent and the child.

Normal state: everything works fine
Normal State

hover state: property applies to each element in the div
Hover state

I have tried using
to toggle the state but it does not work.


<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>


.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;

This is my java servlet code:

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>");

Answer Source

The selector .myClmass :hover means that the rule is applied to all descendant elements of the element with the class myClmass where the mouse is actually over. So your rule is applied to all elements that are within the element with the class myClmass

If you want to apply the box shadow to the element with the class myClmass then the selector has to be .myClmass:hover without the space between .myClmass and :hover