javascript - jquery悬停背景bug

Question

我遇到了这个问题，我有 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>

Answer 1

你在function中设置的样式会覆盖你在css中设置的样式

为了防止覆盖不要设置颜色:

$("#"+ 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>