My jQuery doesn't change the fontcolor with the .css() function
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('h3').hover(function() {
$('h3').css({"color","#OOFFFF"});
});
});
</script>
This is my code, placed at the end of my HTML document, before the end of <body> . I'm trying to make my h3 tag change its color to a light blue when I hover over it. This isn't working in my HTML:
<h3 class="masthead-brand">sunil singh</h3>
Can anybody tell me what's wrong? I would really appreciate it.
There is a syntax error in your code, missing : . You are confusing the method('prop', 'value') with method({ prop: 'value' }) syntax. Also, you're using an O ("Oh") instead of a 0 (zero). The "Oh" is not a hex value.
$('h3').hover(function() {
// `this` here refers to the hovered element
$(this).css({"color": "#00FFFF"});
});
There is a syntax error in the code. You have a comma instead of a colon in the object literal.
There is an error in your color code. You have two O characters instead of two zero digits.
This:
$('h3').css({"color","#OOFFFF"});
should be:
$('h3').css({"color":"#00FFFF"});
Side note: The color #00FFFF is not light blue, it's cyan.
Another side note: You can use CSS for hover effects, then the effect also goes away when you no longer hover over the element. Example (goes in the head element):
<style>
h3:hover { color: #00FFFF; }
</style>
Try this:
$(document).ready(function () {
$('h3').hover(function() {
$(this).css("color", "red");
});
});
Added a comma or , instead of a colon or : in css("color", "red")
I made it red as an example, change it for your needs :)
Note: It is better to use a class in your function unless you want all h3 to change color on hovering
上一篇: <hr>中颜色错误