Question

在菜单项上，我超链接a，为此创建了一个悬停效果。但是我不希望标题和img超链接具有那些悬停效果。我想要img上的干净超链接，标题没有任何悬停效果。

HTML和CSS

      * {
        margin: 0;
        padding: 0;
      }        
      nav{
        width: 100%;
        background-color: #f0f0f0;
        height:110px;
      }        
       .menu ul{
        margin-left: 50px;
        display: flex;
        align-items: flex-end;        
      }  
      .menu ul li {
        list-style: none;
      }
      .menu ul li img {
        display: block;
      }
      .menu ul li a {
        display: block;
        text-decoration: none;
        font-family: 'Segoe UI';
        padding-right: 18px;
        padding-left: 18px;
        padding-top:14px;
        padding-bottom:14px;
        margin-bottom: 10px;
        color: black;
      }
      .menu ul li a:hover {
        display: block;
        text-decoration: none;
        font-family: 'Segoe UI';
        background-color: #ff7504;
        color: white;
        padding-left: 18px;
        padding-right: 18px;
        padding-top:14px;
        padding-bottom:14px;
        margin-bottom: 10px;
      }
      .menu h1 {
        display: block;
        font-family: 'Segoe UI';
        font-weight: lighter;
        font-size: 44px;
        padding-right: 50px;
        line-height: 0.9;
      }

 <nav class="menu">
        <ul class="menu">
            <li>
                <a href="#">
                    <img src="http://placehold.jp/120x120.png" width="120px" height="120px">
                </a>
            </li>
            <li><a class="header" href="#"><h1>Sitename</h1></a>
            </li>
            <li><a href="#">option1</a>
            </li>
            <li><a href="#">option2</a>
            </li>
            <li><a href="#">option3</a>
            </li>
            <li><a href="#">option4</a>
            </li>
        </ul>
    </nav>

避免其他a的悬停效果对img和标头超链接的悬停效果

Answer 1

由于：not选择器方法对您不起作用，因此我可以想到两种方法。

手动重置第一个和第二个超链接的CSS

    .menu ul li:nth-of-type(1) a:hover , .menu ul li:nth-of-type(2) a:hover {
    display: block;
    text-decoration: none;
    font-family: 'Segoe UI';
    padding-right: 18px;
    padding-left: 18px;
    padding-top:14px;
    padding-bottom:14px;
    margin-bottom: 10px;
    color: black;

  }

将此CSS添加到悬停效果CSS之下！

将类添加到您想要将鼠标悬停到的超链接上，然后编辑这些类。

<nav class="menu">
    <ul class="menu">
        <li>
            <a href="#">
                <img src="http://placehold.jp/120x120.png" width="120px" height="120px">
            </a>
        </li>
        <li><a class="header" href="#"><h1>Sitename</h1></a>
        </li>
        <li><a href="#" class="hoverMe">option1</a>
        </li>
        <li><a href="#" class="hoverMe">option2</a>
        </li>
        <li><a href="#" class="hoverMe">option3</a>
        </li>
        <li><a href="#" class="hoverMe">option4</a>
        </li>
    </ul>
</nav>

CSS：

.menu ul li .hoverMe:hover {
    display: block;
    text-decoration: none;
    font-family: 'Segoe UI';
    background-color: #ff7504;
    color: white;
    padding-left: 18px;
    padding-right: 18px;
    padding-top:14px;
    padding-bottom:14px;
    margin-bottom: 10px;

  }

我知道可能有一个较短的方法可以实现，但是让我知道它会有所帮助！

Answer 2

您当前的选择器

.menu ul li a:hover

说

只要悬停CSS类别为.menu的元素中无序列表中列表项内的 any 锚元素，就根据我给您的规则设置锚的样式。 / p>

也就是说，不是您想要的。相反，您只希望该HTML结构中的某些链接具有这种行为。

最简单，最好的实现方法是，通过向您添加不需要悬停的CSS类，来排除那些您不想悬停的对象，

.menu ul li a:not(.no-hover):hover

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background-color: #f0f0f0;
  height: 110px;
}

.menu ul {
  margin-left: 50px;
  display: flex;
  align-items: flex-end;
}

.menu ul li {
  list-style: none;
}

.menu ul li img {
  display: block;
}

.menu ul li a {
  display: block;
  text-decoration: none;
  font-family: 'Segoe UI';
  padding-right: 18px;
  padding-left: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  color: black;
}

.menu ul li a:not(.no-hover):hover {
  display: block;
  text-decoration: none;
  font-family: 'Segoe UI';
  background-color: #ff7504;
  color: white;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 10px;
}

.menu h1 {
  display: block;
  font-family: 'Segoe UI';
  font-weight: lighter;
  font-size: 44px;
  padding-right: 50px;
  line-height: 0.9;
}

<nav class="menu">
  <ul class="menu">
    <li>
      <a href="#" class="no-hover">
        <img src="http://placehold.jp/120x120.png" width="120px" height="120px">
      </a>
    </li>
    <li>
      <a class="header no-hover" href="#">
        <h1>Sitename</h1>
      </a>
    </li>
    <li><a href="#">option1</a>
    </li>
    <li><a href="#">option2</a>
    </li>
    <li><a href="#">option3</a>
    </li>
    <li><a href="#">option4</a>
    </li>
  </ul>
</nav>

或，方法是将CSS类添加到您希望执行以下操作的所有链接上：

.menu ul li .menulink:hover

* {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background-color: #f0f0f0;
  height: 110px;
}

.menu ul {
  margin-left: 50px;
  display: flex;
  align-items: flex-end;
}

.menu ul li {
  list-style: none;
}

.menu ul li img {
  display: block;
}

.menu ul li a {
  display: block;
  text-decoration: none;
  font-family: 'Segoe UI';
  padding-right: 18px;
  padding-left: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  color: black;
}

.menu ul li a.menulink:hover {
  display: block;
  text-decoration: none;
  font-family: 'Segoe UI';
  background-color: #ff7504;
  color: white;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-bottom: 10px;
}

.menu h1 {
  display: block;
  font-family: 'Segoe UI';
  font-weight: lighter;
  font-size: 44px;
  padding-right: 50px;
  line-height: 0.9;
}

<nav class="menu">
  <ul class="menu">
    <li>
      <a href="#">
        <img src="http://placehold.jp/120x120.png" width="120px" height="120px">
      </a>
    </li>
    <li>
      <a class="header" href="#">
        <h1>Sitename</h1>
      </a>
    </li>
    <li><a href="#" class="menulink">option1</a>
    </li>
    <li><a href="#" class="menulink">option2</a>
    </li>
    <li><a href="#" class="menulink">option3</a>
    </li>
    <li><a href="#" class="menulink">option4</a>
    </li>
  </ul>
</nav>

由于CSS无法根据元素的内容/子元素来样式化元素，因此CSS类是您通常在此处使用的样式。

避免其他a的悬停效果对img和标头超链接的悬停效果

2 个答案: