jquery - CSS 显示 block 不适用于特定元素

Question

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

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

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

样式有什么问题？

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;
}

查询

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");  
      });


  }

Answer 1

事实证明，我把它搞砸了一点。

首先，我决定使用一个关闭按钮(顺便说一句，我切换到了一个按钮标签)。我给了它一个宽度和一个高度(除了 display:block css 属性之外)，以便让它使用菜单的整个宽度并让悬停动画按照我正在寻找的方式工作。

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