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 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之间没有空格

Answer 2

尝试{{1}};在您的css中的子元素

悬停属性适用于儿童

2 个答案: