html - 仅使用 CSS 突出显示事件菜单项

Question

我有一个工作正常的顶部导航菜单，如果该菜单项处于事件状态，我只想保留出现在悬停事件上的下划线。我尝试了很多在论坛上找到的解决方案，但不知何故没有一个奏效。感谢您的帮助。

这里是 html 和 css 片段:

	body {
	  margin: auto;
	}

	.topnavbar {
	  background-color: rgba(20, 180, 255, 1);
	  /*rgba(0,255,150,0.6); #3EDC99*/
	  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
	  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
	  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
	}

	.nav {
	  padding: 5px 5px 5px 5px;
	}

	html {
	  box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	  box-sizing: inherit;
	}

	body {
	  background-color: rgba(245, 245, 245, 1)/*#3498db; */
	}

	.nav {
	  width: 550px;
	  margin: 0 auto 0 auto;
	  text-align: center;
	}


	/* Navigation */

	.nav {
	  font-family: Verdana, Georgia, Arial, sans-serif;
	  font-size: 14px;
	}

	.nav-items {
	  padding: 0;
	  list-style: none;
	}


	/* color of menu links
	span	{
		
		color:yellow;
	}
	*/

	.nav-item {
	  display: inline-block;
	  margin-right: 25px;
	}

	.nav-item:last-child {
	  margin-right: 0;
	}

	.nav-link,
	.nav-link:link,
	.nav-link:visited,
	.nav-link:active,
	.submenu-link,
	.submenu-link:link,
	.submenu-link:visited,
	.submenu-link:active {
	  display: block;
	  position: relative;
	  font-size: 14px;
	  letter-spacing: 1px;
	  cursor: pointer;
	  text-decoration: none;
	  outline: none;
	  color: blue;
	}

	.nav-link::before {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  height: 3px;
	  background: rgba(0, 0, 0, 0.2);
	  opacity: 0;
	  -webkit-transform: translate(0, 10px);
	  transform: translate(0, 10px);
	  transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.nav-link:hover::before,
	.nav-link:hover::before {
	  opacity: 1;
	  -webkit-transform: translate(0, 5px);
	  transform: translate(0, 5px);
	}

	.dropdown {
	  position: relative;
	}

	.dropdown .nav-link {
	  padding-right: 15px;
	  height: 17px;
	  line-height: 17px;
	}

	.dropdown .nav-link::after {
	  content: "";
	  position: absolute;
	  top: 6px;
	  right: 0;
	  border: 5px solid transparent;
	  border-top-color: blue;
	  /*small triangle showing drop down menu*/
	}

	.submenu {
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  z-index: 100;
	  width: 200px;
	  margin-left: -100px;
	  background: blue;
	  border-radius: 3px;
	  line-height: 1.46667;
	  margin-top: -5px;
	  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
	  opacity: 0;
	  -webkit-transform: translate(0, 0) scale(.85);
	  transform: translate(0, 0)scale(.85);
	  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
	  pointer-events: none;
	}

	.submenu::after,
	.submenu::before {
	  content: "";
	  position: absolute;
	  bottom: 100%;
	  left: 50%;
	  margin-left: -10px;
	  border: 10px solid transparent;
	  height: 0;
	}

	.submenu::after {
	  border-bottom-color: blue;
	}

	.submenu::before {
	  margin-left: -13px;
	  border: 13px solid transparent;
	  border-bottom-color: rgba(0, 0, 0, .1);
	  -webkit-filter: blur(1px);
	  filter: blur(1px);
	}

	.submenu-items {
	  list-style: none;
	  padding: 10px 0;
	}

	.submenu-item {
	  display: block;
	  text-align: left;
	}

	.submenu-link,
	.submenu-link:link,
	.submenu-link:visited,
	.submenu-link:active {
	  color: #3498db;
	  padding: 10px 20px;
	}

	.submenu-link:hover {
	  text-decoration: underline;
	}

	.submenu-seperator {
	  height: 0;
	  margin: 12px 10px;
	  border-top: 1px solid #eee;
	}

	.show-submenu .submenu {
	  opacity: 1;
	  -webkit-transform: translate(0, 25px) scale(1);
	  transform: translate(0, 25px) scale(1);
	  pointer-events: auto;
	}

	.submenu-link {
	  color: red;
	}

<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">

<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
  <ul class="nav-items">
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Home</span></a>
    </li>
    <li class="nav-item ">
      <a href="#" class="nav-link"><span>Media</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
        </ul>
      </nav>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Search</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Report</span></a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link"><span>More</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
          <li class="submenu-item">
            <hr class="submenu-seperator" />
          </li>
          <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
        </ul>
      </nav>
    </li>
  </ul>
</nav>


<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>

我使用 js 打开下拉菜单项，但我认为没有必要使帖子比现在更扩展。

Answer 1

您可以创建一个新类，例如.is-active。在主页上，您可以将此类添加到导航中的主页链接，如下所示:

<li class="nav-item">
  <a href="#" class="nav-link is-active"><span>Home</span></a>
</li>

在您的 CSS 中，您可以使用与 :hover 相同的方式设置 is-active 类。

在您站点的每个新页面上，在 HTML 中，将 .is-active 类的位置更改为适当的页面。如果您的网站更大或更复杂，您可以改为以编程方式执行此操作。

基本示例:

body {
  margin: auto;
}

.topnavbar {
  background-color: rgba(20, 180, 255, 1);
  /*rgba(0,255,150,0.6); #3EDC99*/
  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}

.nav {
  padding: 5px 5px 5px 5px;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: rgba(245, 245, 245, 1)/*#3498db; */
}

.nav {
  width: 550px;
  margin: 0 auto 0 auto;
  text-align: center;
}


/* Navigation */

.nav {
  font-family: Verdana, Georgia, Arial, sans-serif;
  font-size: 14px;
}

.nav-items {
  padding: 0;
  list-style: none;
}


/* color of menu links
	span	{
		
		color:yellow;
	}
	*/

.nav-item {
  display: inline-block;
  margin-right: 25px;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
  display: block;
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: blue;
}

.nav-link::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: translate(0, 10px);
  transform: translate(0, 10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:focus::before {
  opacity: 1;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
}

.dropdown {
  position: relative;
}

.dropdown .nav-link {
  padding-right: 15px;
  height: 17px;
  line-height: 17px;
}

.dropdown .nav-link::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  border: 5px solid transparent;
  border-top-color: blue;
  /*small triangle showing drop down menu*/
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 100;
  width: 200px;
  margin-left: -100px;
  background: blue;
  border-radius: 3px;
  line-height: 1.46667;
  margin-top: -5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  opacity: 0;
  -webkit-transform: translate(0, 0) scale(.85);
  transform: translate(0, 0)scale(.85);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;
}

.submenu::after,
.submenu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  height: 0;
}

.submenu::after {
  border-bottom-color: blue;
}

.submenu::before {
  margin-left: -13px;
  border: 13px solid transparent;
  border-bottom-color: rgba(0, 0, 0, .1);
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.submenu-items {
  list-style: none;
  padding: 10px 0;
}

.submenu-item {
  display: block;
  text-align: left;
}

.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
  color: #3498db;
  padding: 10px 20px;
}

.submenu-link:hover {
  text-decoration: underline;
}

.submenu-seperator {
  height: 0;
  margin: 12px 10px;
  border-top: 1px solid #eee;
}

.show-submenu .submenu {
  opacity: 1;
  -webkit-transform: translate(0, 25px) scale(1);
  transform: translate(0, 25px) scale(1);
  pointer-events: auto;
}

.submenu-link {
  color: red;
}

.nav-link.is-active::before {
  opacity: 1;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
}

<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">

<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
  <ul class="nav-items">
    <li class="nav-item">
      <a href="#" class="nav-link is-active"><span>Home</span></a>
    </li>
    <li class="nav-item ">
      <a href="#" class="nav-link"><span>Media</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
        </ul>
      </nav>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Search</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link"><span>Report</span></a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link"><span>More</span></a>
      <nav class="submenu">
        <ul class="submenu-items">
          <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
          <li class="submenu-item">
            <hr class="submenu-seperator" />
          </li>
          <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
          <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
        </ul>
      </nav>
    </li>
  </ul>
</nav>


<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>