悬停属性适用于孩子答案

【问题标题】：Hover property applies to child悬停属性适用于孩子
【发布时间】：2016-08-27 12:24:50
【问题描述】：

大家好，我一直在尝试将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>");

【问题讨论】：

我们需要您的代码来帮助您解决问题。
显示发送到浏览器的实际输出，最重要的是你的css代码的相关部分，包含你的:hover。
对于此类问题，您不应显示服务器端代码，而应显示发送给客户端的相关 html 代码。您不应该期望有人试图弄清楚您的服务器端代码是如何构成您发送给客户端的实际 html 代码的。所以如果你以后有类似的问题，请在浏览器中查看源代码并将相关部分发布在这里。
谢谢，下次我会注意的

标签： css box-shadow descendant

【解决方案1】：

选择器.myClmass :hover 表示该规则适用于鼠标实际所在的类myClmass 元素的所有后代元素。因此，您的规则适用于类 myClmass 的元素内的所有元素

如果你想将盒子阴影应用到类 myClmass 的元素上，那么选择器必须是 .myClmass:hover，.myClmass 和 :hover 之间没有空格

【讨论】：

非常感谢，这就是问题
非常感谢。这对我来说很新鲜。
感谢您对这个概念的解释非常有帮助。

【解决方案2】：

试试pointer-events:none;在你的 CSS 中的子元素上

【讨论】：

虽然这可能会解决问题，但它更像是一种解决方法，因为如果 OP 正确使用 :hover，则不会出现问题。
@t.niese 你是对的，但似乎柯林斯不知道如何使用悬停属性，而且他没有给我们他的 CSS，所以它似乎是唯一的帮助方法他现在
@collins 你有 CSS 文件吗？
是的，我要添加整个css和html文件
好的，所以你必须在你的子元素类中添加pointer-events:none;