html - 悬停在与 wrapper 相同的背景颜色上

Question

我对悬停有疑问。 wrapper (kuguar-sport-color) 的 background-color 与 :hover 相同，但没有不透明度:0.5。

如果我从 id 中删除了 kuguar-sport-color - categories 悬停是有效的。看起来包装器覆盖了悬停。

问题 我不知道如何在我的案例中使用悬停

$(document).ready(function () {
    //$(".nav-hover").hover(function (e) {
    //    $(this).css("background-color", e.type === "mouseenter" ? "rgba(227, 30, 36, 0.5)" : "rgba(227, 30, 36, 0.5)")
    //})

    $('div[name="nav-btn"]').on('click', function () {
        var that = this;
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;
                if ($(that).css('display') == "none") {
                    $(that).show(50, function () { $(that).fadeIn("slow"); });
                } else {
                    $(that).hide(50, function () { $(that).fadeOut(); });
                    lookUpForChildrens(that);
                }
            });
        }
    });

    function lookUpForChildrens(that) {
        var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
        if (list != 'undefined' || list != null || list.length != 0) {
            list.each(function () {
                var that = this;
                if ($(that).css('display') == "block") {
                    $(that).hide(50, function () { $(that).fadeOut(); });
                    //lookUpForChildrens(that);
                }
            });
        }
    }
});

.kuguar-sport-color {
    background-color: rgba(227, 30, 36, 1);
}

.nav-center {
    display: flex;
    justify-content: center;
}

.nav-margin {
    margin-left: 25%;
    margin-right: 25%;
}

.nav-btn-clear {
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-image: none;
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
}

.nav-btn:hover {
    background-color: rgba(227, 30, 36, 0.5);  /*.kuguar-sport-color with opacity*/
}

.nav-padding {
    padding-left: 25%;
    padding-right: 25%;
}

.nav-center-nested {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 998;
    width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="categories" class="col kuguar-sport-color no-padding no-margin">
<nav id="main-nav">
    <div class="row nav-margin p-3 text-center"><div name="nav-btn" class="nav-btn col" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div><div name="nav-btn" class="nav-btn col" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div><div name="nav-btn" class="nav-btn col" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div><div class="position-relative w-100"><div class="nav-center-nested row no-margin kuguar-sport-color text-center"><div style="display: none;" class="col" data-p="140" data-v="368"><div class="d-inline"><a class="text-light" href="#"> Górskie</a></div><div class="d-inline"><a class="text-light" href="#"> testgorskie</a></div><div class="d-inline"><a class="text-light" href="#"> testgorskie2</a></div><div class="d-inline"><a class="text-light" href="#"> testgorskie3</a></div><div class="d-inline"><a class="text-light" href="#"> testgorskie1-1</a></div><div class="d-inline"><a class="text-light" href="#"> testgorskie1-2</a></div></div><div class="w-100"></div><div style="display: none;" class="col" data-p="140" data-v="369"><div class="d-inline"><a class="text-light" href="#"> Miejskie</a></div></div><div class="w-100"></div><div style="display: none;" class="col" data-p="140" data-v="370"><div class="d-inline"><a class="text-light" href="#"> Dziecięce</a></div></div><div class="w-100"></div></div></div></div>
</nav>
</div>

Answer 1

您可以定位 .nav-btn 并添加 :hover:

.nav-btn:hover{
  opacity:0.5;
}

片段:

$(document).ready(function() {
  //$(".nav-hover").hover(function (e) {
  //    $(this).css("background-color", e.type === "mouseenter" ? "rgba(227, 30, 36, 0.5)" : "rgba(227, 30, 36, 0.5)")
  //})

  $('div[name="nav-btn"]').on('click', function() {
    var that = this;
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "none") {
          $(that).show(50, function() {
            $(that).fadeIn("slow");
          });
        } else {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          lookUpForChildrens(that);
        }
      });
    }
  });

  function lookUpForChildrens(that) {
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "block") {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          //lookUpForChildrens(that);
        }
      });
    }
  }
});

.kuguar-sport-color {
  background-color: rgba(227, 30, 36, 1);
}

.nav-center {
  display: flex;
  justify-content: center;
}

.nav-margin {
  margin-left: 25%;
  margin-right: 25%;
}

.nav-btn-clear {
  border-width: 0;
  border-style: none;
  border-color: transparent;
  border-image: none;
  background-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.nav-btn:hover {
  background-color: rgba(227, 30, 36, 0.5);
  /*.kuguar-sport-color with opacity*/
}

.nav-padding {
  padding-left: 25%;
  padding-right: 25%;
}

.nav-center-nested {
  position: absolute !important;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 998;
  width: 100%;
}

.nav-btn:hover{
  opacity:0.5;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="categories" class="col kuguar-sport-color no-padding no-margin">
  <nav id="main-nav">
    <div class="row nav-margin p-3 text-center">
      <div name="nav-btn" class="nav-btn col" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div>
      <div class="position-relative w-100">
        <div class="nav-center-nested row no-margin kuguar-sport-color text-center">
          <div style="display: none;" class="col" data-p="140" data-v="368">
            <div class="d-inline"><a class="text-light" href="#"> Górskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie2</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie3</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-1</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-2</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="369">
            <div class="d-inline"><a class="text-light" href="#"> Miejskie</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="370">
            <div class="d-inline"><a class="text-light" href="#"> Dziecięce</a></div>
          </div>
          <div class="w-100"></div>
        </div>
      </div>
    </div>
  </nav>
</div>

或者以 background-color 为目标:

.nav-btn:hover{
  background-color: rgba(255, 255, 255, 0.6);
}

$(document).ready(function() {
  //$(".nav-hover").hover(function (e) {
  //    $(this).css("background-color", e.type === "mouseenter" ? "rgba(227, 30, 36, 0.5)" : "rgba(227, 30, 36, 0.5)")
  //})

  $('div[name="nav-btn"]').on('click', function() {
    var that = this;
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "none") {
          $(that).show(50, function() {
            $(that).fadeIn("slow");
          });
        } else {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          lookUpForChildrens(that);
        }
      });
    }
  });

  function lookUpForChildrens(that) {
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "block") {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          //lookUpForChildrens(that);
        }
      });
    }
  }
});

.kuguar-sport-color {
  background-color: rgba(227, 30, 36, 1);
}

.nav-center {
  display: flex;
  justify-content: center;
}

.nav-margin {
  margin-left: 25%;
  margin-right: 25%;
}

.nav-btn-clear {
  border-width: 0;
  border-style: none;
  border-color: transparent;
  border-image: none;
  background-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.nav-btn:hover {
  background-color: rgba(227, 30, 36, 0.5);
  /*.kuguar-sport-color with opacity*/
}

.nav-padding {
  padding-left: 25%;
  padding-right: 25%;
}

.nav-center-nested {
  position: absolute !important;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 998;
  width: 100%;
}

.nav-btn:hover{
  background-color: rgba(255, 255, 255, 0.6);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="categories" class="col kuguar-sport-color no-padding no-margin">
  <nav id="main-nav">
    <div class="row nav-margin p-3 text-center">
      <div name="nav-btn" class="nav-btn col" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div>
      <div class="position-relative w-100">
        <div class="nav-center-nested row no-margin kuguar-sport-color text-center">
          <div style="display: none;" class="col" data-p="140" data-v="368">
            <div class="d-inline"><a class="text-light" href="#"> Górskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie2</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie3</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-1</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-2</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="369">
            <div class="d-inline"><a class="text-light" href="#"> Miejskie</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="370">
            <div class="d-inline"><a class="text-light" href="#"> Dziecięce</a></div>
          </div>
          <div class="w-100"></div>
        </div>
      </div>
    </div>
  </nav>
</div>

您还可以添加:

.nav-btn{
  margin: -1rem;
  padding: 1rem;
}

使悬停时的 .nav-btn 覆盖更大的区域。

$(document).ready(function() {
  //$(".nav-hover").hover(function (e) {
  //    $(this).css("background-color", e.type === "mouseenter" ? "rgba(227, 30, 36, 0.5)" : "rgba(227, 30, 36, 0.5)")
  //})

  $('div[name="nav-btn"]').on('click', function() {
    var that = this;
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');

    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "none") {
          $(that).show(50, function() {
            $(that).fadeIn("slow");
          });
        } else {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          lookUpForChildrens(that);
        }
      });
    }
  });

  function lookUpForChildrens(that) {
    var list = $('#main-nav').find('div[data-p=' + $(that).data('v') + ']');
    if (list != 'undefined' || list != null || list.length != 0) {
      list.each(function() {
        var that = this;
        if ($(that).css('display') == "block") {
          $(that).hide(50, function() {
            $(that).fadeOut();
          });
          //lookUpForChildrens(that);
        }
      });
    }
  }
});

.kuguar-sport-color {
  background-color: rgba(227, 30, 36, 1);
}

.nav-center {
  display: flex;
  justify-content: center;
}

.nav-margin {
  margin-left: 25%;
  margin-right: 25%;
}

.nav-btn-clear {
  border-width: 0;
  border-style: none;
  border-color: transparent;
  border-image: none;
  background-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

.nav-btn:hover {
  background-color: rgba(227, 30, 36, 0.5);
  /*.kuguar-sport-color with opacity*/
}

.nav-padding {
  padding-left: 25%;
  padding-right: 25%;
}

.nav-center-nested {
  position: absolute !important;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 998;
  width: 100%;
}

.nav-btn{
  margin: -1rem;
  padding: 1rem;
}

.nav-btn:hover{
  background-color: rgba(255, 255, 255, 0.6);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="categories" class="col kuguar-sport-color no-padding no-margin">
  <nav id="main-nav">
    <div class="row nav-margin p-3 text-center">
      <div name="nav-btn" class="nav-btn col" data-v="138"><button class="nav-btn-clear text-light"> Aktualności</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="139"><button class="nav-btn-clear text-light"> O nas</button></div>
      <div name="nav-btn" class="nav-btn col" data-v="140"><button class="nav-btn-clear text-light"> Rowery</button></div>
      <div class="position-relative w-100">
        <div class="nav-center-nested row no-margin kuguar-sport-color text-center">
          <div style="display: none;" class="col" data-p="140" data-v="368">
            <div class="d-inline"><a class="text-light" href="#"> Górskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie2</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie3</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-1</a></div>
            <div class="d-inline"><a class="text-light" href="#"> testgorskie1-2</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="369">
            <div class="d-inline"><a class="text-light" href="#"> Miejskie</a></div>
          </div>
          <div class="w-100"></div>
          <div style="display: none;" class="col" data-p="140" data-v="370">
            <div class="d-inline"><a class="text-light" href="#"> Dziecięce</a></div>
          </div>
          <div class="w-100"></div>
        </div>
      </div>
    </div>
  </nav>
</div>