悬停属性适用于 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

尝试pointer-events:none；在 css

中的子元素上

Answer 2

选择器.myClmass :hover表示规则应用于鼠标实际悬停在classmyClmass的元素的所有后代元素。因此，您的规则适用于具有 class myClmass

的元素内的所有元素

如果要将框阴影应用到带有 class myClmass 的元素，则选择器必须是 .myClmass:hover 而 [=15 之间没有 space =] 和 :hover

悬停属性适用于 child

Hover property applies to child

css

descendant

box-shadow

悬停 属性 适用于 child

Hover property applies to child

css

descendant

box-shadow

悬停属性适用于 child