应该禁用搜索框上的悬停效果

Question

我正在尝试解决我的学习项目中的悬停效果问题，但没有解决。搜索框li应该没有悬停效果。任何帮助将不胜感激！谢谢！

我做了所有这些类来分离它而不是直接针对 li。一旦我也交换了 li 并且它起作用了。但是 HTML 验证器指出这是一个错误...嗯，是的，我们不能将 div 放入 ul.

如有任何帮助，我们将不胜感激。

谢谢！

这是其中的 HTML 部分：

 nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

 <nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>

谢谢！

Answer 1

一个选项是将 CSS 中的 .navBar li:hover 选择器更改为 .navBar li:not(.searchLi):hover。

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar li:not(.searchLi):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>

Answer 2

您可以使用此选择器 .navBar ul li:not(:last-child):hover 来选择所有 li 元素，但不选择最后一个。

nav ul {
  display: flex;
  padding-inline-start: 40px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: fit-content;
  border-radius: 4px;
  border: 1px solid rgb(87, 86, 86);
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
  font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
    Verdana, sans-serif;
  top: 110px;
  left: 200px;
}

.store,.mac,.ipod,.iphone,.ipad,.itunes,.support,.appleLogoInNavBar {
  width: 102px;
  height: 36px;
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
  cursor: pointer;
}

nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0px -1px black;
}

.searchLi{
  background: linear-gradient(#9e9d9d, #615e5e, #8d8c8c);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #615e5e;
}

.navBar ul li:not(:last-child):hover {
  background:
    linear-gradient(rgb(97, 96, 96),
      rgb(51, 50, 50),
      rgb(49, 49, 49));
}

<nav class="navBar">
        <ul>
            <li class="appleLogoInNavBar">
                <a href="#">
                    <img src="images/AppleLogo.png" alt="Apple Logo">
                </a>
            </li>
                    <li class="store"><a href="#">Store</a></li>
                    <li class="mac"><a href="#">Mac</a></li>
                    <li class="ipod"><a href="#">iPod</a></li>
                    <li class="iphone"><a href="#">iPhone</a></li>
                    <li class="ipad"><a href="#">iPad</a></li>
                    <li class="itunes"><a href="#">iTunes</a></li>
                    <li class="support"><a href="#">Support</a></li>
                    <li class="searchLi"><input class="searchInput" type="search"></li>
        </ul>
    </nav>

应该禁用搜索框上的悬停效果

Hover effect on search box should be disabled

html

css

html-lists

mousehover

navbar