My jQuery doesn't change the fontcolor with the .css() function

Question

    <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.

@skjindal93: nope, this is perfectly fine. This way the browser calls `http://ajax...` if you are on a http connection, and `https://ajax...` if you are on a https website :) Rather smart solution really. And one provided by jQuery itself ;) — Martijn, Jul 01 '14 at 21:46
But what if I run it locally on the system? It will call with file:// extension which will not work. — skjindal93, Jul 01 '14 at 21:49
@skjindal93: That is right, the URL only works when the page is fetched using the `http:` or `https:` protocol. It's not intended for use in pages that you view locally. — Guffa, Jul 01 '14 at 21:56

Ram · Accepted Answer · 2014-07-02T10:26:13.047

6

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

edited Jul 02 '14 at 10:26

answered Jul 01 '14 at 21:33

Ram

143,282
16
168
197

Also, as mentioned by @Guffa, using letters in color codes can cause [unexpected results](http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color). – showdev Jul 01 '14 at 21:36
Worthy a note: It might be better to add a class, eg `.hovermode`, and give that the new font color. Style should remain in stylesheets as much as possible. What if you want this effect on more locations? or want it another color? – Martijn Jul 01 '14 at 21:38
Thank you! This and @Guffa's answer did it for me. I appreciate the assistance, as I am just starting out with jQuery. – sunilsingh Jul 01 '14 at 21:42
Not 100% sure (someone might want to perf), but I believe that `.css('color','#0FF')` is faster than `.css({color:'#0FF'})` due to the fact it doesnt need to literate. – Martijn Jul 01 '14 at 21:43

Guffa · Answer 2 · 2014-07-01T21:53:53.560

1

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>

edited Jul 01 '14 at 21:53

answered Jul 01 '14 at 21:36

Guffa

687,336
108
737
1,005

oh, the oh instead of zero, very sharp – Martijn Jul 01 '14 at 21:42

score 0 · Answer 3 · edited Sep 13 '16 at 10:02

0

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

edited Sep 13 '16 at 10:02

marc_s

732,580
175
1,330
1,459

answered Jul 01 '14 at 21:35

imbondbaby

6,351
3
21
54

where did masthead-brand come from? – scunliffe Jul 01 '14 at 21:36
Actually, I'd recommend sticking to `#0FF` as it´s a tad faster :) (not really noticable, but the devil is in the details) – Martijn Jul 01 '14 at 21:36
@scunliffe `
sunil singh
` I suppose you could use h3 as well – imbondbaby Jul 01 '14 at 21:37
If you're gonna add an answer which has been added 3 other times, at least make sure ou are conform... THe TS uses h3, not a class. Dont change those things as it might confuse people. If you want to add a class (which _might_ be better), add that as a note – Martijn Jul 01 '14 at 21:40
I believe, I was one of the first one to post the answer but I will add your notes. Please check when other answers were posted – imbondbaby Jul 01 '14 at 21:41

My jQuery doesn't change the fontcolor with the .css() function

3 Answers3

sunil singh