CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolors
user2847749
user2847749

Reputation: 369

Changing the color of text WITHIN a hover box

I have a table and different fields in the table will change font color depending on if a flag is flipped. I have several flags with different colors that might be flipped at any time.

I wanted to include a hover over text that had the name of the exception caused by the flag and in the same color as the flag.

(I was originally going to include a little square of color next to the name but this seems difficult/impossible WITHIN a hover, so now I'm just trying to change the text color).

I cannot get this to work. help?

my flags are: 

flag1, if true then the field shows in red for exception1
flag2, if true then the fields shows in blue for exception2
flag3, if true then the fields shows in green for exception3

javascript/jquery:

if($flag1 === true){            
    $flag1.css("color", "red");
    $(".myTable").attr('title', 'exception1').css("color","red");
}else if($flag2 === true){              
    $flag2.css("color", "blue");
    $(".myTable").attr('title', 'exception2').css("color","blue");
}else if($flag3 === true){              
    $flag3.css("color", "green");
    $(".myTable").attr('title', 'exception3').css("color","green");
}

however, trying to color the text that shows up INSIDE THE HOVER, isn't working. it's just coloring more of the table's fields. How can I color the text inside the hover instead of it's default black color?

As a side note, if it's just as easy to put a block of color next to the text instead of coloring the text, please let me know about this as well. I cannot seem to find a solution for either.

please see fiddle for simple example. http://jsfiddle.net/L3e1ff3g/

Upvotes: 0

Views: 174

Answers (1)

Greenonion
Greenonion

Reputation: 87

First of all in your if/else you are checking every-time ($flag1 === true) I think it should be 

if($flag1 === true){   
...
}else if($flag2 === true){
...
}else if($flag3 === true){

About second question - please provide your html

Upvotes: 0

Related Questions