时间戳

首页 > 解决方案 > 悬停后创建不透明的超链接，同时为 div 父级设置透明背景

javascript - 悬停后创建不透明的超链接，同时为 div 父级设置透明背景

问题描述

我有一个div导航元素，它在悬停时变得有点透明（请注意，在 div 元素悬停之前，所有超链接都是不透明的）。我想让当前悬停的超链接再次变得不透明，例如本网站的导航部分：https ://www.amandarachlee.com/

我不知道该怎么做。如果您能告诉我应该如何为导航部分赋予这种风格，我将不胜感激。

a:focus,
a:hover {
  color: #333300;
}

a {
  text-decoration: none;
}

.header-inner {
  padding: 20px;
}

#header-nav ul {
  list-style-type: none;
}

#header-nav ul li {
  display: inline-block;
  position: relative;
  zoom: 1;
  -webkit-backface-visibility: hidden;
  vertical-align: middle;
  font-size: 20px;
  margin: 0 auto !important;
}

#header-nav ul li a {
  margin-left: 60px;
  transition: .4s all ease-in;
  font-weight: bold;
  color: #333300;
  padding: 0 10px;
}

#header-nav {
  width: 50%;
  height: 25px;
  margin: 0 auto;
  transition: .2s ease-out;
}

#header-nav:hover {
  opacity: .5;
}

.header-nav-item {
  color: #333300;
}

#header-nav:hover>.header-nav-item {
  opacity: 1;
}
<div class="container-fluid">
  <header class="header header-bottom">
    <div class="header-inner">
      <nav id="header-nav">
        <ul>
          <li><a href="#" class="header-nav-item">item1</a></li>
          <li><a href="#" class="header-nav-item">item2</a></li>
          <li><a href="#" class="header-nav-item">item3</a></li>
          <li><a href="#" class="header-nav-item">item4</a></li>
          <li><a href="#" class="header-nav-item">item5</a></li>
          <li><a href="#" class="header-nav-item">item6</a></li>
        </ul>
      </nav>
    </div>
  </header>
</div>

标签： javascripthtmljquerycss

解决方案

只是改变

#header-nav:hover {
    opacity: .5;
}

进入

#header-nav:hover li:not(:hover){
    opacity: .5;
}

这样，当悬停整个容器时，只有未悬停的项目才会获得 opacity。

请参阅以下代码段：

a:focus, a:hover {
    color:#333300;
}

a {
    text-decoration: none;
}

.header-inner {
    padding: 20px;
}

#header-nav ul {
    list-style-type: none;
}

#header-nav ul li {
    display: inline-block;
    position: relative;
    zoom: 1;
    -webkit-backface-visibility: hidden;
    vertical-align: middle;
    font-size: 20px;
    margin: 0 auto !important;
}

#header-nav ul li a {
    margin-left: 60px;
    transition: .4s all ease-in;
    font-weight: bold;
    color: #333300;
    padding: 0 10px;
}

#header-nav {
    width: 50%;
    height: 25px;
    margin: 0 auto;
    transition: .2s ease-out;
}

#header-nav:hover li:not(:hover){
    opacity: .5;
}



.header-nav-item {
    color: #333300;
}

#header-nav:hover > .header-nav-item{
    opacity: 1;
}
<div class="container-fluid">
        <header class="header header-bottom">
            <div class="header-inner">
                <nav id="header-nav">
                    <ul>
                        <li><a href="#" class="header-nav-item">item1</a></li>
                        <li><a href="#" class="header-nav-item">item2</a></li>
                        <li><a href="#" class="header-nav-item">item3</a></li>
                        <li><a href="#" class="header-nav-item">item4</a></li>
                        <li><a href="#" class="header-nav-item">item5</a></li>
                        <li><a href="#" class="header-nav-item">item6</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </div>

推荐阅读