像包装纸一样用相同的背景色盘旋

Question

我在悬停时遇到问题。包装器（hasMultChars :: Predicate String hasMultChars = Predicate $ \x -> length x > 1 showInt :: Int -> String showInt = show intHasMultChars :: Predicate Int intHasMultChars = contramap showInt hasMultChars ）的background-color与kuguar-sport-color的{​​{1}}相同，但没有color。

如果我从:hover中删除了opacity: 0.5-kuguar-sport-color悬停在工作。看起来包装纸覆盖了悬停。

问题 我不知道如何在我的情况下使用悬停

id

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

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>