为什么当我单击任何选项卡时悬停背景色不起作用

我正在通过进行简单的导航来练习jQuery。有 4 个主要选项卡。每个都有自己的悬停颜色，即主导航栏中的暗淡。我已经为这件事使用了CSS。但是我想在单击选项卡时更改选项卡颜色，再次单击时，我希望它恢复。为此，我使用了 toggleClass(( 函数。但是事情不起作用，甚至在放置此功能后悬停也停止工作。我的查询是：

为什么会发生这种情况，悬停被禁用？如何正确使用 toggleClass((？有没有办法通过jQuery的悬停事件而不是单击来执行这些操作(显示隐藏的菜单(？[我试过这个，显示子菜单，但一旦鼠标移出，它们就会消失。我该如何解决？这是代码片段：

body{
	margin: 0px;
	}
#nav{
	height: 40px;
	background-color: #009999;
	}
	#navbar{
	height: inherit;
	width: 590px;
	margin: auto;
	}
#slide{
	height: 400px;
	background-color: #999999;
	}
#content{
	height: 100px;
	background-color: #666666;
	}
ul li{
	float: left;
	list-style: none;
	padding: 5px 25px 5px 25px;
	line-height: 30px;
	background-color: #009999;
	cursor: pointer;
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	border-left: 1px solid #006666;
	transition-property: background-color;
	transition-duration: 0.5s;
	}
.c1{
border-right: 1px solid #006666;
}
ul li:hover{
	background-color: #006666;
	}
ul{
	margin-top: -16px;
	}
#dropdown{
	position: absolute;
	width: 92.5%;
	//display: none;
	padding:10px 0 10px 100px;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	background-color:#00CCCC;
	display: none;
	}
.c7{
	background-color: #006666;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$(document).ready(function(){
	$("li").eq(0).click( function(){
		$(".c2").fadeToggle(300);
		$("li").eq(0).toggleClass("c7");
		$(".dropcontainer #dropdown").eq(0).siblings().fadeOut("fast");
		$("li").eq(0).siblings().css("background-color", "#009999");
		});
	$("li").eq(1).click( function(){
		$(".c3").fadeToggle(300);
		$("li").eq(1).toggleClass("c7");
		$(".dropcontainer #dropdown").eq(1).siblings().fadeOut("fast");
		$("li").eq(1).siblings().css("background-color", "#009999");
		});
	$("li").eq(2).click( function(){
		$(".c4").fadeToggle(300);
		$("li").eq(2).toggleClass("c7");
		$(".dropcontainer #dropdown").eq(2).siblings().fadeOut("fast");
		$("li").eq(2).siblings().css("background-color", "#009999");
		});
	$("li").last().click(function(){
		$(".c5").fadeToggle(300);
		$("li").eq(3).toggleClass("c7");
		$(".dropcontainer #dropdown").eq(3).siblings().fadeOut("fast");
		$("li").eq(3).siblings().css("background-color", "#009999");
		});
});
</script>
</head>
<body>
<div id="nav">
  <div id="navbar">
    <ul>
      <li>Tech</li>
      <li>National</li>
      <li>Sports</li>
      <li class="c1">Contact</li>
    </ul>
  </div>
</div>
<div class="dropcontainer">
<div id="dropdown" class="c2">
<p>Tech</p>
<p>Tech2</p>
<p>Tech3</p>
</div>
<div id="dropdown" class="c3">
<p>National</p>
<p>National2</p>
<p>National3</p>
</div>
<div id="dropdown" class="c4">
<p>Sports</p>
<p>Sports2</p>
<p>Sports3</p>
</div>
<div id="dropdown" class="c5">
<p>Contact</p>
<p>Contact2</p>
<p>Contact3</p>
</div>
</div>
<div id="slide"></div>
<div id="content"></div>
</body>
</html>

我认为这就是你想要的。请尝试一下！

我已经评论了我认为没有必要的东西。

说明：当您以编程方式应用 css 规则时，例如 .css("background-color", "#009999")这比样式定义中的规则。这就是所谓的特异性。那里有一个链接 -> CSS 特异性

之后，：悬停将按预期工作。

此外，我删除了容器 fadeOut，并使用 id 添加了更多处理(并删除了 last(( 并使用了真正的索引，它现在似乎可以工作了。

为什么会发生这种情况，悬停被禁用？ <-是的，来自.css和引用特定元素的特定性比样式定义更大。

如何正确使用 toggleClass((？ <-如果您没有它，切换类将添加它，如果您有它，请将其删除。

有没有办法通过jQuery的悬停事件而不是单击来执行这些操作(显示隐藏菜单(？ [我试过这个，显示子菜单，但一旦鼠标移出，它们就会消失。我该如何解决？<--- 您还可以使用mouseover()或hover()方法。它们的工作方式类似于单击，但您还需要在栏下方的菜单中有一个mouseout()，以便在指向周围时隐藏它。而且会有更多的工作:)

这是代码片段：

body {
  margin: 0px;
}
#nav {
  height: 40px;
  background-color: #009999;
}
#navbar {
  height: inherit;
  width: 590px;
  margin: auto;
}
#slide {
  height: 400px;
  background-color: #999999;
}
#content {
  height: 100px;
  background-color: #666666;
}
ul li {
  float: left;
  list-style: none;
  padding: 5px 25px 5px 25px;
  line-height: 30px;
  background-color: #009999;
  cursor: pointer;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  border-left: 1px solid #006666;
  transition-property: background-color;
  transition-duration: 0.5s;
}
.c1 {
  border-right: 1px solid #006666;
}
ul li:hover {
  background-color: #006666;
}
ul {
  margin-top: -16px;
}
#dropdown {
  position: absolute;
  width: 92.5%;
  //display: none;
  padding: 10px 0 10px 100px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #00CCCC;
  display: none;
}
.c7 {
  background-color: #006666;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
  <script>
    $(document).ready(function() {
      $("li").eq(0).click(function() {
        $(".c2").fadeToggle(300);
        $(".c3").fadeOut(300);
        $(".c4").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(0).toggleClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(2).removeClass("c7");
        $("li").eq(3).removeClass("c7");
        //$(".dropcontainer #dropdown").eq(0).fadeOut("fast");
        //$("li").eq(0).css("background-color", "#009999");
      });
      $("li").eq(1).click(function() {
        $(".c3").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c4").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(1).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(2).removeClass("c7");
        $("li").eq(3).removeClass("c7");
        //$(".dropcontainer #dropdown").eq(1).fadeOut("fast");
        //$("li").eq(1).css("background-color", "#009999");
      });
      $("li").eq(2).click(function() {
        $(".c4").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c3").fadeOut(300);
        $(".c5").fadeOut(300);
        $("li").eq(2).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(3).removeClass("c7");
        //$(".dropcontainer #dropdown").eq(2).fadeOut("fast");
        //$("li").eq(2).css("background-color", "#009999");
      });
      $("li").eq(3).click(function() {
        $(".c5").fadeToggle(300);
        $(".c2").fadeOut(300);
        $(".c3").fadeOut(300);
        $(".c4").fadeOut(300);
        $("li").eq(3).toggleClass("c7");
        $("li").eq(0).removeClass("c7");
        $("li").eq(1).removeClass("c7");
        $("li").eq(2).removeClass("c7");
        //$(".dropcontainer #dropdown").eq(3).fadeOut("fast");
        //$("li").eq(3).css("background-color", "#009999");
      });
    });
  </script>
</head>
<body>
  <div id="nav">
    <div id="navbar">
      <ul>
        <li>Tech</li>
        <li>National</li>
        <li>Sports</li>
        <li class="c1">Contact</li>
      </ul>
    </div>
  </div>
  <div class="dropcontainer">
    <div id="dropdown" class="c2">
      <p>Tech</p>
      <p>Tech2</p>
      <p>Tech3</p>
    </div>
    <div id="dropdown" class="c3">
      <p>National</p>
      <p>National2</p>
      <p>National3</p>
    </div>
    <div id="dropdown" class="c4">
      <p>Sports</p>
      <p>Sports2</p>
      <p>Sports3</p>
    </div>
    <div id="dropdown" class="c5">
      <p>Contact</p>
      <p>Contact2</p>
      <p>Contact3</p>
    </div>
  </div>
  <div id="slide"></div>
  <div id="content"></div>
</body>
</html>

相关内容

最新更新

热门标签：