Question

我的问题可能有一个非常简单的答案，但是我很难找到一些我认为非常简单的工作。在我的网站加载时，我设置了一个隐藏可见性的div：

<div id="BottomBarContainer" class="BottomBarContainer" style="visibility:hidden;">
 <div class="BottomBarLeft"><img style='height:100%; width:100%; object-fit: contain' src="images/BottomBarLeft.gif" title="Bottom Bar"/></div> 
 <div class="BottomText1"></div>
 <div class="BottomText1"><br><br>
     <span style="font-family: Calibri; font-weight: normal; font-style: normal; text-decoration: none; font-size: 10pt; color:white;"><a href="index.asp">About Us</a></span><br><br><BR>
     <span style="font-family: Calibri; font-weight: normal; font-style: normal; text-decoration: none; font-size: 10pt; color:white;">Contact Us</span><br><br><BR>
     <span style="font-family: Calibri; font-weight: normal; font-style: normal; text-decoration: none; font-size: 10pt; color:white;">Location</span>
 </div>

然后在我的CSS中我检查屏幕调整大小时最大宽度是否低于900px，如果是这样的话我隐藏了一个div然后尝试显示隐藏的一个。隐藏可见的div工作正常，但我不能让隐藏的div变得可见。这是我的CSS：

@media screen and (max-width: 900px) {
.BottomBarContainer {display:block;visibility:visible; }
.floatdiv { display: none; }  
.MiddlePicContainer {display:none; }
#myRotator {display:none; }
#HiddenDiv { display:block; visibility:visible;}

}

我尝试了多种方法来获得理想的结果;使用display：none而不是在隐藏时设置可见性，将可见性移动到BottomBarContainer类中，所有这些都可以隐藏div，只是无法将其恢复可见。

Answer 1

那是因为您使用style属性指定了visiblitiy:hidden。 style属性会覆盖其他所有内容。把它移到你的CSS定义，你应该没问题。

Answer 2

在类.BottomBarContainer中指定属性，而不是使用内联样式属性。在代码段下方改进了代码。

段

＆＃13;

.BottomBarContainer {
  visibility: hidden;
}
span {
  font-family: Calibri;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  font-size: 10pt;
  color: white;
}
img {
  height: 100%;
  width: 100%;
  object-fit: contain
}
@media screen and (max-width: 900px) {
  .BottomBarContainer {
    visibility: visible;
  }
  .floatdiv {
    display: none;
  }
  .MiddlePicContainer {
    display: none;
  }
  #myRotator {
    display: none;
  }
  #HiddenDiv {
    visibility: visible;
  }
}

＆＃13;

<div id="BottomBarContainer" class="BottomBarContainer">
  <div class="BottomBarLeft">
    <img src="//lorempixel.com/900/300" title="Bottom Bar" />
  </div>
  <div class="BottomText1"></div>
  <div class="BottomText1">
    <br />
    <br />
    <span><a href="index.asp">About Us</a></span>
    <br />
    <br />
    <br />
    <span>Contact Us</span>
    <br />
    <br />
    <br />
    <span>Location</span>
  </div>

＆＃13;

在CSS中隐藏和取消隐藏div时遇到问题

2 个答案:

段