Elias Mondelaers Elias Mondelaers - 3 months ago 9
CSS Question

How to let all functions work again after jQuery?

I made a little project with some HTML, CSS and jQuery and everything worked fine except one little thing and that is when I click on the button and after that try to hover over my menu, the color doesnt change.



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>





Any ideas? Im new to jQuery so..

Answer

You are setting background-color on all the li. Since this is added to inline style it will override CSS.

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

The easy solution is to add !important to :hover. Now the inline style won't override it. But then the red style won't work when you click on a li. So a better solution would be to add a class, instead of adding style. The best part about adding a class instead of adding a style, is that you can easily remove a class from an element and it will look as before you added the class.

$(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!");
  });
});
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;
}
<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>

Comments