Search code examples
cssbox-shadowdescendant

Hover property applies to child

Good day everyone, i have been trying to apply box-shadow 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 Jquery to toggle the state but it does not work.

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

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>");
                    out.println("</div></div>");
                }
                out.println("</div>");
Solution

  • 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