css - 悬停属性适用于 child

Question

大家好，我一直在尝试将 box-shadow 属性应用于网页，但如果我将效果应用于正常状态，一切正常，但在悬停状态下，如果我悬停对于 child ，它适用于 parent 和 child 。

正常状态:一切正常

悬停状态:属性应用于 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 servlet 代码:

 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