the `display: none;` did not work - css

Question

Why my qrcode-big do not hidden, the bellow is my component code:
<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>
there are some indifferent code upper you can ignore them, the key code are qrcode-big, its display:none; do not work, you can check in the bellow.
from the snapshot you can see the i-header's style:
the display: none; is strikethrough, why it do not work there?
the snapshot is there, why it do not hidden?
the display: none; did not work.

Answer 1

Sounds like it might be a case of css specificity. Some other style rule is overriding the i-hide class.
For a css class that is required to perform an exact task, using !important might be ok. However, it is better to avoid as it can lead to problems later on.
But you can at least quickly test with it:
.i-hide,
div.i-hide,
.container .i-hide{
display: none!important;
}
And if that works, then if you prefer not to use the !important, then remove it and see if the new specificity of the call was sufficient. Or if it still don't work, then try additional specifications of the class hereditary.
NB: you can try these edits rght in the Developer console... so you can quickly see which is the best combination. Just edit the style in the styles window.