I'm new to Jquery and I'm trying to get started by simply changing the color of the font when I hover over it. I thought that I put the right code in but it's not working? can someone help me get this going?

SHOW.JS:

$(document).ready(function(){
 $(".modal").hover(function(){
 $(".modal").css("color","red");
}));

SHOW.HTML.ERB:

 <p class="modal"><%= @subscriber.last_name %></p>

APPLICATION.JS:

 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .

This is all my code. I just wanted to keep it simple at first.

I'm new to Jquery and I'm trying to get started by simply changing the color of the font when I hover over it. I thought that I put the right code in but it's not working? can someone help me get this going?

SHOW.JS:

$(document).ready(function(){
 $(".modal").hover(function(){
 $(".modal").css("color","red");
}));

SHOW.HTML.ERB:

 <p class="modal"><%= @subscriber.last_name %></p>

APPLICATION.JS:

 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .

This is all my code. I just wanted to keep it simple at first.

• javascript
• jquery
• ruby-on-rails

• 1 Have you included the jQuery library ? Do share browser-rendered code instead of ruby code... – Rayon Commented Jul 6, 2016 at 2:02
• I think so. I'm posting the file (UPDATED) – Bitwise Commented Jul 6, 2016 at 2:03
• Any errors? What's the current behavior? – Petr Gazarov Commented Jul 6, 2016 at 2:09
• Possible duplicate of How can I change the text color with jQuery? – Martin Thoma Commented Jul 27, 2017 at 7:26

3 Answers 3

Andros Rex's method works perfectly - however you may actually want something more like this instead - it changes the color back to the previous color when the mouse is no longer over the element.

$(document).ready(
    function() {
        var old;
        $(".modal").hover(
            function() {
                old = $(".modal").css("color");
                $(".modal").css("color","red");
            },
            function() {
                $(".modal").css("color",old);
            }
        );
    }
);

There are missing closing parentheses. This is how it should be:

$(document).ready(function() {
  $(".modal").hover(function() {
    $(".modal").css("color","red");
  });
});

Try this

$('.modal').css({"color" : "red"});