Question

我创建了一个包含一些悬停元素的网站。一切都有效，除了一个元素。元素是一周的日子。当我在那天盘旋时，这一天应该变得不透明。但是当我徘徊一天时，只有星期日（最后一天）变得不透明，在我悬停的那一天并不重要。

现在对我来说很奇怪的是，当我打开开发人员工具时，一切正常。当我关闭工具时，它不再起作用了。

我已经在IE8，IE10中测试了它没有麻烦。 Chrome和Firefox也很干净。

当我搜索网页时，没有任何可用的内容。

有人可以帮助我或指出我正确的方向吗？

修改

我的PHP代码：

<section class="opentime wrapper cf">
    <div class="sectionboxtitle">
        <div class="boxtitle headerfont"><?php _e('Openingsuren','aletheme'); ?></div>
    </div>
    <div class="timelinebox cf">
        <ul class="timelineopening">

        <!-- Dagen worden gecreëerd door een foreach lus a.d.h.v. een array -->
            <?php
            $i = 1;

            // dagen array maken
            $days = array( 
                'ma' => 'maandag', 
                'di' => 'dinsdag',
                'woe' => 'woensdag',
                'do' => 'donderdag',
                'vr' => 'vrijdag',
                'za' => 'zaterdag',
                'zo' => 'zondag');

            // for loop starten en array doorlopen
            foreach ($days as $day => $v) { ?>
                <li>
                    <?php // if ($i > 1 && $i < 7){ ?> <!-- Als dag geen zaterdag of zondag is -->
                    <?php if (strtolower($options[$v . "text"]) != "gesloten"){ ?> <!-- Als bij openingsuur niet gesloten staat -->
                        <div class="roundbox speed<?php echo $i; ?>" data-fadetime="<?php echo $i; ?>">
                    <?php }else{ ?> <!-- Als het wel zaterdag of zondag is: classe greybox toevoegen -->
                        <div class="roundbox greybox" data-fadetime="<?php echo $i; ?>">
                    <?php } ?>
                        <span class="dayname headerfont"><?php echo $day; ?></span>
                        <span class="icon icon<?php echo $i; ?>"></span>
                    </div>
                    <div class="timetext bodyfont">
                        <?php echo $options[$v . "text"]; ?>
                    </div>
                </li>
                <?php $i++; ?>  
            <?php } ?>
        </ul>
    </div>
    <!-- Tonen extra informatie -->
    <div class="extraInfo">
        <?php 
            $extraInfo = nl2br($options['extraInfo']);
            echo $extraInfo;
        ?>
    </div>
</section>

和css（减）：

.opentime {
  margin-top: 50px;
  margin-bottom: 65px;

 .extraInfo{ 
   margin: 40px 15px 0px 15px;
 }

.hometextsection {
margin: 40px 15px 0px 15px;
// line-height: 24px;

.homepagefeatured {
  margin-bottom: 30px;

  img {
    max-width: 100%;
    height: auto;
  }
}

p {
  // line-height: 24px;
}
}


.timelineopening {
  margin-top: 45px;

li {
  display: inline-block;
  float: left;
  margin-left: 17px;

  .miniround {
    .scale(1)!important;
  }
  .speed1 {
    .transition(all 500ms ease-in-out)!important;
  }
  .speed2 {
    .transition(all 700ms ease-in-out)!important;
  }
  .speed3 {
    .transition(all 900ms ease-in-out)!important;
  }
  .speed4 {
    .transition(all 1100ms ease-in-out)!important;
  }
  .speed5 {
    .transition(all 1300ms ease-in-out)!important;
  }
  .speed6 {
    .transition(all 1500ms ease-in-out)!important;
  }
  .speed7 {
    .transition(all 1700ms ease-in-out)!important;
  }
  .roundbox {
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 2px center;
    text-align: center;

    .scale(0);
    width: 123px;
    height: 123px;

    .rounded(360px);
    .transition(all 250ms ease-in-out);

    &:hover {
      .dayname {
        font-size: 0px;
        .transition(all 300ms ease-in-out);
      }
      span.icon {
        // background-position: center center;
        background-repeat: no-repeat;
        .opacity(1);
        .transition(all 300ms ease-in-out);
      }
      .scale(1.15)!important;
      .transition(all 250ms ease-in-out)!important;
    }

    span.icon {
      position: absolute;
      top:0;
      left:0;
      width: 90%;
      height: 90%;
      background-position: 55% 60%;
      background-repeat: no-repeat;
      display: block;
      .opacity(0);
      .transition(all 300ms ease-in-out);
    }

    span.dayname {
      .transition(all 300ms ease-in-out);
      display: block;
      width: 100%;
      text-align: center;
      line-height: 123px;
      font-size: 44px;
      color:#ffffff;
      text-transform: uppercase;
      padding-right: 10px;
      .box-sizing(border-box);
    }
  }
  .timetext {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    font-size: 20px;
    color:#838383;
  }
}
}
}

我已经改变了IE9的一部分：

.opentime .timelinebox .timelineopening li .roundbox:hover .dayname {
   font-size: 244%;
   opacity: 0.85;
   filter: alpha(opacity=85);
}

我希望这对你有所帮助。

Answer 1

请分享代码，以便获得更好的答案您可以参考此链接IE9 - Position: relative; hover issue

IE9悬停不起作用

修改

1 个答案: