CSS-將鼠標懸停在另一個元素上時無法將樣式應用於一個元素

Question

我有一個帶有背景的盒子，將其懸停時會變暗。 還有一個文本是無色的（透明顏色），當父元素懸停在上面時，我試圖將其顏色設置為白色。 我知道這應該工作：

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

但是在我的代碼中卻沒有。 誰能指出我的錯誤？ jsfiddle 在這里。

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懸停了。

Answer 1

[ #overlay ]是[ > ] [ .tru ]的父級[ + ] [ .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 個解決方案

解決方案1
1 已采納 2016-02-14 14:41:32

解決方案2
0 2016-02-14 14:46:25

CSS-將鼠標懸停在另一個元素上時無法將樣式應用於一個元素

問題描述

2 個解決方案

解決方案1 1 已采納 2016-02-14 14:41:32

解決方案2 0 2016-02-14 14:46:25

解決方案1
1 已采納 2016-02-14 14:41:32

解決方案2
0 2016-02-14 14:46:25