`display：none;`不起作用

Question

为什么我的qrcode-big没有隐藏，下面是我的组件代码：

<script>

  export default{
    name: 'iheader',
    data(){
      return {
        qrcodeIsHidden:true
      }
    },
    components: {},
    methods: {
      overShow(){
        this.qrcodeIsShow=true
      },
      outHide(){
        this.qrcodeIsShow=false
      }
    }
  }


</script>

<style scoped>

  ...

  .qrcode-big {
    width: 110px;
    height: 140px;
    background-color: #fff;

    text-align: center;

    position: absolute;
    right: 10px;
    top: 50px;
    z-index: 100;
  }

  .i-hide {
    display: none;
  }

  .qrcode-big img, span {
    margin: 0 auto;
  }

  .qrcode-big img {
    display: block;
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 14px;

  }

  .box-shadow{
    -webkit-box-shadow:0 0 10px rgba(204, 204, 204, .5);
    -moz-box-shadow:0 0 10px rgba(204, 204, 204, .5);
    box-shadow:0 0 10px rgba(204, 204, 204, .5);
  }

  .qrcode-big span {
    font-size: 12px;
    color: #000;
  }

  .qrcode img {
    line-height: 68px;
    width: 14px;
    height: 14px;
    margin: 4px auto -4px auto;
    background-color: #c3c3c3;
  }

  .flex-box {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }

</style>

there is the html code:

<template>
  ......
      <div class="right-buttons ">

        <div class="qrcode" @mouseover="overShow" @mouseout="outHide">
          <img src="../../assets/img/home/little-qrcode.png">
        </div>
        <div class="login-logout">
          <a>登录/注册</a>
        </div>
      </div>
      <div  :class="{ 'qrcode-big': true, 'box-shadow': true, 'i-hide':qrcodeIsHidden }">
        <img src="../../assets/img/home/little-qrcode.png">
        <span>请扫码关注,接收重要通知</span>
      </div>
    </div>
  </div>
</template>

有一些无关紧要的代码，你可以忽略它们，关键代码是qrcode-big，它的display:none;不起作用，你可以在下面查看。

从快照中你可以看到i-header的风格： display: none;是删除线，为什么它在那里不起作用？

快照在那里，为什么它不隐藏？ display: none;无效。

Answer 1

听起来可能是css特异性的一个案例。其他一些样式规则覆盖了i-hide类。

对于执行确切任务所需的css类，使用!important可能没问题。但是，最好避免，因为它可能会在以后导致问题。

但你至少可以用它来快速测试：

 .i-hide,
 div.i-hide,
 .container .i-hide{
    display: none!important;
 }

如果可以，那么如果你不想使用!important，那么删除它，看看这个调用的新特性是否足够。或者，如果它仍然不起作用，那么尝试遗传类的其他规范。

注意：您可以在开发者控制台中尝试这些编辑...这样您就可以快速查看哪个是最佳组合。只需在样式窗口中编辑样式即可。