CSS显示块不适用于某个元素答案

【问题标题】：CSS display block doesn't work on a certain elementCSS显示块不适用于某个元素
【发布时间】：2016-12-21 04:54:52
【问题描述】：

在我创建的滑动菜单中，我设置了两个关闭按钮（close-btn-2 和 close-btn），每个按钮执行不同的幻灯片动画，由 jQuery 触发（close-btn = 从右向左滑动/关闭-btn-2 = 当屏幕改变大小时从上到下滑动。

当屏幕尺寸缩小时，close-btn_2 通过 jQuery（通过 show 方法）动态显示，而 close-btn 以相同的方式隐藏。

我面临的唯一问题是，当我将鼠标悬停在 close-btn-2 上时，元素会在“X”标签周围而不是整个块周围改变颜色。而另一个 close btn 工作得很好，就像其他菜单元素一样。

样式有什么问题？

HTML：

<div class="sidebar">
        <a href="#" id="close-btn">&times;</a>
        <a href="#" id="close-btn-2">&times;</a>
        <a href="#">Accomodations</a>
        <a href="#">Services</a>
        <a href="#">Merchandising</a>
        <a href="#">About us</a>
    </div>

CSS

.sidebar {
   height: 640px;
   width: 0px;
   background-color: black;
   float: right;
   overflow: hidden;
   position: absolute;
   top: 0;
   right: 0;
   transition: 0.5s;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
 }

.sidebar a {
   display: block;
   text-decoration: none;
   padding: 20px;
   font-size: 20px;
}

.sidebar a:hover {
   background-color: #ff0066;
   color: black;
   text-decoration: none;
}

jQuery

else if (width < 415) {

      $("#menu-btn").hide();
      $("#menu-btn-2").show();

      $("#close-btn").hide();
      $("#close-btn-2").show();

      $("#menu-btn-2").on("click", function() {
         $(".sidebar").attr("id", "topbar-on");
         $(".inner-title").fadeOut("fast"); 
      });

      $("#close-btn-2").on("click", function() {
         $(".sidebar").removeAttr("id", "topbar-on");
         $(".inner-title").fadeIn("slow");  
      });


  }

【问题讨论】：

为什么不用css媒体查询？
@denis 我尝试通过媒体查询添加显示属性，但它也不起作用
您是否检查过 - 在动态添加到 html 后 close-btn-2 是否设置为 display:none ？有时在动态添加中，元素稍后添加，但事件或代码首先运行（根据您的脚本顺序）
我刚刚编辑了这个问题，因为我犯了一个错误。我要的是 display:block 属性
另外我想说的是，在控制台（谷歌浏览器）上，无论我为此元素设置什么显示属性，close-btn-2 菜单始终显示为 display:inline 属性跨度>

标签： jquery html css

【解决方案1】：

事实证明，我有点搞砸了。

首先，我决定使用单个关闭按钮（顺便说一下，我切换到了按钮标签）。我给了它一个宽度和一个高度（除了 display:block css 属性），以便让它使用菜单的整个宽度并让悬停动画按照我想要的方式工作。

正如@denis 建议的那样，媒体查询更容易用于响应性，因此我摆脱了所有 jQuery window.resize 情况并使用媒体查询来更改样式菜单的样式。

【讨论】：