Question

我有一个带背景的盒子，当它盘旋时会变暗。还有一个文本，它是无色的（透明色），我试图在父元素悬停时将其颜色设置为白色。我知道这应该有效：

#someDiv:hover > .someClass {
  color: white;
}

但在我的代码中它并没有。任何人都可以指出我的错误吗？ jsfiddle here。

HTML：

<div class="row">
  <div class="box" style="background:url('http://images6.fanpop.com/image/photos/34000000/Sandor-Clegane-sandor-clegane-34035068-960-640.jpg')">
    <div id="overlay"></div>
    <div class="hashContainer"><span class="tru">123</span></div>
  </div>

CSS：

    .box {
      display: inline-block;
      width: 300px;
      margin: 40px;
      height: 300px;
      background-size: cover;
      z-index: -1;
    }

    .hashContainer {
      pointer-events: none;
      position: relative;
      top: 22%;
    }

    #overlay {
      height: 300px;
      width: 300px;
      position: absolute;
    }

    #overlay:after {
      content: "";
      display: block;
      height: inherit;
      width: inherit;
      opacity: 0;
      background: rgba(0, 0, 0, .5);
      transition: all 1s;
      top: 0;
      left: 0;
      position: absolute;
    }

    #overlay:hover:after {
      opacity: 1;
    }

    .tru {
      font-size: 70px;
      color: transparent;
      font-weight: 900;
      transition: all 1s;
    }

    /*  not working  */
    #overlay:hover > .tru {
      color: white;
    }

   /*  not working  */
  .box > .tru {
      color: white;
    }

在我的情况下，我尝试将颜色更改应用于tru班级范围，而box \ overlay div s则悬停。

Answer 1

[#overlay]是[+] [.hashcontainer和.hashcontainer]的兄弟，是[>]的父[.tru }]

<强> CSS

#overlay:hover + .hashContainer > .tru {
      color: white;
}

<强> HTML

        <div id="overlay"></div><!----------------[#overlay isn't a parent of .hashContainer but an actual sibling]-->
        <div class="hashContainer"><!-------------[.hashContainer is the parent of .tru]-->
            <span class="tru">123</span>
        </div>

http://plnkr.co/edit/H2Up3Y2YD6fl5uiwQky4?p=preview

Answer 2

考虑以下HTML文档：

<html>
<head>
<style>
.someClass:hover {  //mention in this manner
  background: blue;
}
</style>
</head>
<body>

<div id="id1" class="someClass" >
<h1 id="id2"  > HELLO MAN </h1>
</div>
</body>
</html>

以上代码有效。将鼠标悬停在<div>上时，颜色会变为蓝色。

CSS - 当鼠标悬停在另一个元素上时无法将样式应用于一个元素

2 个答案: