Question

我用一些HTML，CSS和jQuery创建了一个小项目，除了一件小事之外一切正常，当我点击按钮然后尝试将鼠标悬停在我的菜单上时，颜色不会改变。

h3 {
  text-align: center;
  color: red;
}

ul {
  padding: 0px;
  margin: 0 auto;
  list-style-type: none;
  height: 61px;
}

li {
  background-color: #003300;
  display: inline-block;
  height: 18px;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
  float: left;
  border-left: 4px solid black;
  font-family: "Lucida Sans Unicode";
}

#menubalk {
  text-align: center;
  margin: 0 auto;
  height: 18px;
  width: 1000px;
  box-shadow: 0px 50px 15px;
}

li:hover {
  background-color: #006600;
  cursor: pointer;
  border-left: 4px solid #333333;
}

#afbeelding {
  width: 200px;
  text-align: center;
  margin: 0 auto;
}

#button {
  width: 200px;
  background-color: #cc6600;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0px 0px 30px;
  font-family:"Lucida Sans Unicode";
  font-size: 12px;
  border-radius: 25px;
}

#button:hover {
  opacity: 0.7;
  cursor: pointer;
  border-radius: 0px;
}

footer {
  float: right;
  color: red;
  font-size: 12px;
  font-family: "Lucida Sans Unicode";
}

footer:hover {
  opacity: 0.5;
}

<body>
<body background="http://smashingyolo.com/wp-content/uploads/2014/05/Best-Website-Background-Images3.jpg">
  <h3>The Website of Elias</h3>
  <div id="menubalk">
  <ul>
    <li>This is</li>
    <li>In progress</li>
    <li>Click on the menu to</li>
    <li>Change colors</li>
    <ul>
      </div>
    <br></br>
     <br></br> 
  <div id="button">
    <h2> Click me!</h2>
  </div>
<br></br>
  <div id="afbeelding">
   <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" width= 150px>
  </div>
  
      </body>
<footer> 
  <p><b> -This is a website from Dangas-</b></p>
</footer>
    
<script src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>

<script>
$(document).ready(function(){
$("li").on("click", function() {
$(this).css("background-color", "red")
 });
  $("#button").on("click", function() {
   $("li").css("background-color","#003300")
   });
  $("#button").on("click",function() {
    $("img").fadeToggle(200);
});
  $("li").on("click",function() {
    $("h3").text("Enjoy it!");
});
  });
</script>

有什么想法吗？我是jQuery的新手......

Answer 1

您在所有background-color上设置了li。由于这是添加到内联样式，它将覆盖CSS。

$("li").css("background-color","#003300")

简单的解决方案是将!important添加到:hover。现在内联样式不会覆盖它。但是当你点击li时，红色风格不会起作用。所以更好的解决方案是添加一个类，而不是添加样式。添加类而不是添加样式的最佳部分是，您可以轻松地从元素中删除一个类，它将在您添加类之前看起来。

＆＃13;

$(document).ready(function(){
    $("li").on("click", function() {
        $(this).addClass('selected'); // Add selectedClass instead.
    });
    
  $("#button").on("click", function() {
     $("li").removeClass('selected'); // Back to normal.
   });
  
  $("#button").on("click",function() {
    $("img").fadeToggle(200);
  });
  
  $("li").on("click",function() {
    $("h3").text("Enjoy it!");
  });
});

＆＃13;

h3 {
  text-align: center;
  color: red;
}

ul {
padding: 0px;
  margin: 0 auto;
  list-style-type: none;
  height: 61px;
}

li {
background-color: #003300;
  display: inline-block;
  height: 18px;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  padding: 20px;
  float: left;
  border-left: 4px solid black;
  font-family: "Lucida Sans Unicode";
  
}

li.selected{
  background-color:red;
}

#menubalk {
  text-align: center;
  margin: 0 auto;
  height: 18px;
  width: 1000px;
  box-shadow: 0px 50px 15px;
}

li:hover {
  background-color: #006600 !important;
  cursor: pointer;
  border-left: 4px solid #333333;
}

#afbeelding {
  width: 200px;
  text-align: center;
  margin: 0 auto;
}

#button {
  width: 200px;
  background-color: #cc6600;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0px 0px 30px;
  font-family:"Lucida Sans Unicode";
    font-size: 12px;
  border-radius: 25px;
}

#button:hover {
  opacity: 0.7;
  cursor: pointer;
  border-radius: 0px;
}

footer {
  float: right;
  color: red;
  font-size: 12px;
  font-family: "Lucida Sans Unicode";
}

footer:hover {
  opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>The Website of Elias</h3>
</head>
<body>
<body background="http://smashingyolo.com/wp-content/uploads/2014/05/Best-Website-Background-Images3.jpg">
  <div id="menubalk">
  <ul>
    <li>This is</li>
    <li>In progress</li>
    <li>Click on the menu to</li>
    <li>Change colors</li>
    <ul>
      </div>
    <br></br>
     <br></br> 
  <div id="button">
    <h2> Click me!</h2>
  </div>
<br></br>
  <div id="afbeelding">
   <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" width= 150px>
  </div>
  
      </body>
<footer> 
  <p><b> -This is a website from Dangas-</b></p>
</footer>

＆＃13;

如何在jQuery之后让所有函数再次运行？

1 个答案: