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结构。我有其他效果被触发，这就是我得到的原因。）

我能够触发子元素的转换（例如悬停.celuloseHover并淡入.celuloseHover div p），但我无法触发#guia上的悬停效果......

有办法吗？

感谢。

感谢

Answer 1

在CSS中无法实现。

您必须使用JavaScript：

CSS：将此样式应用于#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：将不透明度改为#guia
的功能

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

HTML：在#guia中写一些内容，否则你将看不到效果

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

HTML：将mouseover mouseout功能设置为celuloseHover ....或者无论你喜欢什么元素

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

CSS Hover div对无子div的触发效果

1 个答案: