CSS 悬停 div 触发效果 no-child div

Question

我正在为我的 css 悬停问题寻找解决方案。

我有这个HTML

#guia {
  background-image: url(../imgs/guia.png);
  height: 40vh;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#celulose {
  background-image: url(../imgs/celulose.png);
}

<div id="page">

  <div id="top">
    <a href="#" target="_blank">
      <div class="celuloseHover">
        <div>
          <div>
            <p>A Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          </div>
          <div id="celulose"></div>
        </div>
      </div>
    </a>
  </div><!-- #top -->

  <div id="mid" class="rel row">
    <div id="selected">
      <div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div id="guia"></div>
      </div>
    </div>
  </div><!-- #mid -->

</div><!-- #page -->

我需要悬停 .celuloseHover 并淡出（不透明度：0）#guia（请不要介意 html 结构。我触发了其他效果，这就是我得到它的原因).

我能够在 child 元素上触发过渡（例如悬停 .celuloseHover 并淡入 .celuloseHover div p），但我无法在 #guia 上触发悬停效果...

有办法吗？

谢谢。

谢谢

Answer 1

在 CSS 中不可能。

您必须使用 JavaScript:

CSS: apply this styles to #guia:

#guia {
 /* yout styles */
    opacity:1;
    -webkit-transition:opacity 0.8s linear 0s;
    -moz-transition:opacity 0.8s linear 0s;
    transition:opacity 0.8s linear 0s;
}

JS : function to change opacity to #guia

<script type="text/javascript">
function fadeGuia(opacity){
    document.getElementById("guia").style.opacity = opacity;
}
</script>

HTML: write something inside #guia otherwise you won't see the effect

<div id="guia">
   aaaaaaaaaaaaaaaaaaaaaaaaaa 
</div>

HTML: set the mouseover mouseout function to celuloseHover.... or to whatever elemen you like

 <div class="celuloseHover" onmouseover="fadeGuia(0)" onmouseout="fadeGuia(1)">

CSS 悬停 div 触发效果 no-child div

CSS Hover div triggering effect on no-child div

html

css

hover