0

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

2 回答 2

4

选择器.myClmass :hover意味着该规则适用于具有myClmass鼠标实际所在类的元素的所有后代元素。因此，您的规则适用于该类元素中的所有元素myClmass

如果要将框阴影应用到具有类的元素，myClmass则选择器必须没有和.myClmass:hover之间的空格.myClmass:hover

于 2016-08-27T14:17:48.593 回答
-1

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

于 2016-08-27T12:30:14.833 回答