jQuery悬停背景错误

时间：2018-10-22 09:34:07

标签： javascript jquery html css

我遇到了一个问题，我有h6s，当您将它们悬停在它们上面时，背景变成灰色（不透明度：0.25;），当您悬停时，背景又变成了透明。然后，当您单击它时，背景变为灰色并保持该状态。由于某些原因，当我将鼠标悬停在其他h6上时，背景不会变成灰色。

$(document).ready(function() {
  var topic_list = {
    0: "HOMEPAGE",
    1: "WHAT HYDROMETEOROLOGICAL BIOHAZARDS ARE",
    2: "WHEN AND WHERE THIS HAPPENED",
    3: "OUR IDEAS",
    4: "PROS AND CONS",
    5: "OUR DETAILED ESSAY ON HYDROMETEOROLOGICAL BIOHAZARDS",
    6: "CREDITS AND REFERENCES"
  };

  for (i in topic_list) {
    $("#" + topic_list[i].split(" ").join("_")).hide();
  }

  $("#HOMEPAGE").show()

  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $("#header").append(element);
    element.className = "topics";
    element.id = topic_list[i].split(" ").join("_") + "_directory";
  }

  $(".topics").click(function() {
    for (var i in topic_list) {
      if (this.id == topic_list[i].split(" ").join("_") + "_directory") {
        $("#" + topic_list[i].split(" ").join("_")).fadeIn();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "rgba(128, 128, 128, 0.25)")
      } else {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "transparent")
      }
    }
  });

  $("#directory_link").click(function() {
    $("#WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE").fadeIn();
    for (var i in topic_list) {
      if (topic_list[i].split(" ").join("_") != "WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE") {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
      }
    }
  });
});
* {
  font-family: Montserrat, Trebuchet MS;
}

body {
  margin: 0px;
  background: white;
}

h1 {
  position: relative;
  margin: 0px;
  padding: 20px;
  color: white;
  text-align: center;
}

h6:hover {
  background: rgba(128, 128, 128, 0.25);
}

h6 {
  position: relative;
  text-align: center;
  margin: 0px;
  padding: 20px;
  color: white;
  display: inline-block;
  transition: 0.4s;
}

header {
  background: #1d29c4;
}

#header {
  background: #202dd9;
  text-align: center;
}

div {
  position: absolute;
}

p {
  position: relative;
  margin: 20px;
  font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<header>
  <h1>HYDROMETEOROLOGICAL BIOHAZARDS</h1>
</header>
<header id="header"></header>
<div id="HOMEPAGE">
  <p><i><b>sfdfdsasafd
</b></i></p>
  <p>afdsdfsfdsa</p>
  <p><i>asdfdsfafds</i></p>
  <p>sdfadfsdfs</p>
  <p>asdf <em>asf</em> <i id="directory_link">sfdadfas</i>? ...</p>
</div>
<div id="WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE">what</div>
<div id="WHEN_AND_WHERE_THIS_HAPPENED">when where</div>
<div id="OUR_IDEAS">ideas</div>
<div id="PROS_AND_CONS">procon</div>
<div id="OUR_DETAILED_ESSAY_ON_HYDROMETEOROLOGICAL_BIOHAZARDS">a</div>
<div id="CREDITS_AND_REFERENCES">cred</div>

4 个答案:

答案 0 :(得分：1)

您在函数中设置的样式会覆盖您在CSS中设置的样式

enter image description here

为防止覆盖，请勿设置颜色：

$("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "")

（比在CSS中使用!important更好） 

			$(document).ready(function() {
				var topic_list = {0: "HOMEPAGE", 1: "WHAT HYDROMETEOROLOGICAL BIOHAZARDS ARE", 2: "WHEN AND WHERE THIS HAPPENED", 3: "OUR IDEAS", 4: "PROS AND CONS", 5: "OUR DETAILED ESSAY ON HYDROMETEOROLOGICAL BIOHAZARDS", 6: "CREDITS AND REFERENCES"};

				for (i in topic_list) {
					$("#" + topic_list[i].split(" ").join("_")).hide();
				}

				$("#HOMEPAGE").show()

				for (var i in topic_list) {
					var element = document.createElement("h6");
					var node = document.createTextNode(topic_list[i]);
					$(element).append(node);
					$("#header").append(element);
					element.className = "topics";
					element.id = topic_list[i].split(" ").join("_") + "_directory";
				}

				$(".topics").click(function() {
					for (var i in topic_list) {
						if (this.id == topic_list[i].split(" ").join("_") + "_directory") {
							$("#" + topic_list[i].split(" ").join("_")).fadeIn();
							$("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "rgba(128, 128, 128, 0.25)")
						} else {
							$("#" + topic_list[i].split(" ").join("_")).fadeOut();
							$("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "")
						}
					}
				});

				$("#directory_link").click(function() {
					$("#WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE").fadeIn();
					for (var i in topic_list) {
						if (topic_list[i].split(" ").join("_") != "WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE") {
							$("#" + topic_list[i].split(" ").join("_")).fadeOut();
						}
					}
				});
			});
			* {
				font-family: Montserrat, Trebuchet MS;
			}

			body {
				margin: 0px;
				background: white;
			}

			h1 {
				position: relative;
				margin: 0px;
				padding: 20px;
				color: white;
				text-align: center;
			}

			h6:hover {
				background: rgba(128, 128, 128, 0.25);
			}

			h6 {
				position: relative;
				text-align: center;
				margin: 0px;
				padding: 20px;
				color: white;
				display: inline-block;
				transition: 0.4s;
			}

			header {
				background: #1d29c4;
			}

			#header {
				background: #202dd9;
				text-align: center;
			}

			div {
				position: absolute;
			}

			p {
				position: relative;
				margin: 20px;
				font-size: 18px;
			}
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<link rel="icon" type="image/x-icon" href="">
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<header>
			<h1>HYDROMETEOROLOGICAL BIOHAZARDS</h1>
		</header>
		
		<header id = "header"></header>

		<div id = "HOMEPAGE">
			<p><i><b>sfdfdsasafd
</b></i></p>
			<p>afdsdfsfdsa</p>
			<p><i>asdfdsfafds</i></p>
			<p>sdfadfsdfs</p>
			<p>But, what <em>are</em> <i id = "directory_link">hydrometeorological biohazards</i>? ...</p>
		</div>

		<div id = "WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE">what
		</div>

		<div id = "WHEN_AND_WHERE_THIS_HAPPENED">when where
		</div>

		<div id = "OUR_IDEAS">ideas
		</div>

		<div id = "PROS_AND_CONS">procon
		</div>

		<div id = "OUR_DETAILED_ESSAY_ON_HYDROMETEOROLOGICAL_BIOHAZARDS">a
		</div>

		<div id = "CREDITS_AND_REFERENCES">cred
		</div>

	</body>
</html>

答案 1 :(得分：0)

您的代码非常复杂，并且可以通过不显眼的方式进行重大重构。但是您遇到的问题是，单击后设置了background-color: transparent内联样式，这将阻止css悬停的发生。因此，要解决此问题，请删除内联background-color。您可以通过将空字符串作为值添加到.css-function来实现：

$("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "")


$(document).ready(function() {
  var topic_list = {
    0: "HOMEPAGE",
    1: "WHAT HYDROMETEOROLOGICAL BIOHAZARDS ARE",
    2: "WHEN AND WHERE THIS HAPPENED",
    3: "OUR IDEAS",
    4: "PROS AND CONS",
    5: "OUR DETAILED ESSAY ON HYDROMETEOROLOGICAL BIOHAZARDS",
    6: "CREDITS AND REFERENCES"
  };

  for (i in topic_list) {
    $("#" + topic_list[i].split(" ").join("_")).hide();
  }

  $("#HOMEPAGE").show()

  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $("#header").append(element);
    element.className = "topics";
    element.id = topic_list[i].split(" ").join("_") + "_directory";
  }

  $(".topics").click(function() {
    for (var i in topic_list) {
      if (this.id == topic_list[i].split(" ").join("_") + "_directory") {
        $("#" + topic_list[i].split(" ").join("_")).fadeIn();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "rgba(128, 128, 128, 0.25)")
      } else {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "")
      }
    }
  });

  $("#directory_link").click(function() {
    $("#WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE").fadeIn();
    for (var i in topic_list) {
      if (topic_list[i].split(" ").join("_") != "WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE") {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
      }
    }
  });
});
* {
  font-family: Montserrat, Trebuchet MS;
}

body {
  margin: 0px;
  background: white;
}

h1 {
  position: relative;
  margin: 0px;
  padding: 20px;
  color: white;
  text-align: center;
}

h6:hover {
  background: rgba(128, 128, 128, 0.25);
}

h6 {
  position: relative;
  text-align: center;
  margin: 0px;
  padding: 20px;
  color: white;
  display: inline-block;
  transition: 0.4s;
}

header {
  background: #1d29c4;
}

#header {
  background: #202dd9;
  text-align: center;
}

div {
  position: absolute;
}

p {
  position: relative;
  margin: 20px;
  font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<header>
  <h1>HYDROMETEOROLOGICAL BIOHAZARDS</h1>
</header>
<header id="header"></header>
<div id="HOMEPAGE">
  <p><i><b>sfdfdsasafd
</b></i></p>
  <p>afdsdfsfdsa</p>
  <p><i>asdfdsfafds</i></p>
  <p>sdfadfsdfs</p>
  <p>But, what <em>are</em> <i id="directory_link">hydrometeorological biohazards</i>? ...</p>
</div>
<div id="WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE">what</div>
<div id="WHEN_AND_WHERE_THIS_HAPPENED">when where</div>
<div id="OUR_IDEAS">ideas</div>
<div id="PROS_AND_CONS">procon</div>
<div id="OUR_DETAILED_ESSAY_ON_HYDROMETEOROLOGICAL_BIOHAZARDS">a</div>
<div id="CREDITS_AND_REFERENCES">cred</div>

答案 2 :(得分：0)

jquery onclick事件jquery向每个background:transparent添加h6时出现了问题。

我已向h6添加！important，如下所示：

h6:hover {
  background: rgba(128, 128, 128, 0.25)!important;
}


$(document).ready(function() {
  var topic_list = {
    0: "HOMEPAGE",
    1: "WHAT HYDROMETEOROLOGICAL BIOHAZARDS ARE",
    2: "WHEN AND WHERE THIS HAPPENED",
    3: "OUR IDEAS",
    4: "PROS AND CONS",
    5: "OUR DETAILED ESSAY ON HYDROMETEOROLOGICAL BIOHAZARDS",
    6: "CREDITS AND REFERENCES"
  };

  for (i in topic_list) {
    $("#" + topic_list[i].split(" ").join("_")).hide();
  }

  $("#HOMEPAGE").show()

  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $("#header").append(element);
    element.className = "topics";
    element.id = topic_list[i].split(" ").join("_") + "_directory";
  }

  $(".topics").click(function() {
    for (var i in topic_list) {
      if (this.id == topic_list[i].split(" ").join("_") + "_directory") {
        $("#" + topic_list[i].split(" ").join("_")).fadeIn();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "rgba(128, 128, 128, 0.25)")
      } else {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
        $("#" + topic_list[i].split(" ").join("_") + "_directory").css("background", "transparent")
      }
    }
  });

  $("#directory_link").click(function() {
    $("#WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE").fadeIn();
    for (var i in topic_list) {
      if (topic_list[i].split(" ").join("_") != "WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE") {
        $("#" + topic_list[i].split(" ").join("_")).fadeOut();
      }
    }
  });
});
* {
  font-family: Montserrat, Trebuchet MS;
}

body {
  margin: 0px;
  background: white;
}

h1 {
  position: relative;
  margin: 0px;
  padding: 20px;
  color: white;
  text-align: center;
}

h6:hover {
  background: rgba(128, 128, 128, 0.25)!important;
}

h6 {
  position: relative;
  text-align: center;
  margin: 0px;
  padding: 20px;
  color: white;
  display: inline-block;
  transition: 0.4s;
}

header {
  background: #1d29c4;
}

#header {
  background: #202dd9;
  text-align: center;
}

div {
  position: absolute;
}

p {
  position: relative;
  margin: 20px;
  font-size: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Hydrometeorological Biohazards</title>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="icon" type="image/x-icon" href="">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">


</head>

<body>

  <header>
    <h1>HYDROMETEOROLOGICAL BIOHAZARDS</h1>
  </header>

  <header id="header"></header>

  <div id="HOMEPAGE">
    <p><i><b>sfdfdsasafd
</b></i></p>
    <p>afdsdfsfdsa</p>
    <p><i>asdfdsfafds</i></p>
    <p>sdfadfsdfs</p>
    <p>But, what <em>are</em> <i id="directory_link">hydrometeorological biohazards</i>? ...</p>
  </div>

  <div id="WHAT_HYDROMETEOROLOGICAL_BIOHAZARDS_ARE">what
  </div>

  <div id="WHEN_AND_WHERE_THIS_HAPPENED">when where
  </div>

  <div id="OUR_IDEAS">ideas
  </div>

  <div id="PROS_AND_CONS">procon
  </div>

  <div id="OUR_DETAILED_ESSAY_ON_HYDROMETEOROLOGICAL_BIOHAZARDS">a
  </div>

  <div id="CREDITS_AND_REFERENCES">cred
  </div>

</body>

</html>

答案 3 :(得分：0)

您的代码可以使用一些修饰，但是我使用了您编写的内容。
试试这个：

$(".topics").click(function(e) {
    // Set an "active" class for an active state
    $(".topics").removeClass("active");
    $(this).addClass("active");
    for (var i in topic_list) {
        if (this.id == topic_list[i].split(" ").join("_") + "_directory") {
            $("#" + topic_list[i].split(" ").join("_")).fadeIn();
        } else {
            $("#" + topic_list[i].split(" ").join("_")).fadeOut();
        }
    }
});
相关问题
最新问题