How can I change the text color with jQuery?
When I hover a text with animation definitely I will use jQuery. Is there a code that will change the color, or size?
4 Answers 4
Place the following in your jQuery mouseover event handler:
To set both color and size at the same time:
You can set any CSS attribute using the .css() jQuery function.
Or you may do the following
But you need to download the color plugin from here.
Nowadays, animating text color is included in the jQuery UI Effects Core. It’s pretty small. You can make a custom download here: http://jqueryui.com/download — but you don’t actually need anything but the effects core itself (not even the UI core), and it brings with it different easing functions as well.
use CSS instead of jquery
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Setting hex colors with jquery
I have a class setup in my style sheet for the UI, and a preferences section where the user can use a color-picker to style the page. The values are stored in the db as hex, but when I use those values to update the page via jQuery:
$nav.css("background-color", button_bg_color) I lose the NEW :hover colors. The non-hover colors change correctly, but I see they get converted to RGB format, and I’m guessing that this is causing the issues with the :hover values. I figure I can change my code and have the class change on hover to get around this, but is there a way to get jQuery to set the colors using the hex values? Or is there something else I’m missing? UPDATE: James Montagne is right in that you can’t change the :hover effect, so I changed it to a class. Now, using the hover() function, I’m still missing something: Fiddle: http://jsfiddle.net/Y9EBt/6/
they are not converted into RGB, your browser’s inspector shows them as RGB, however RGB(r,g,b) and #rrggbb formats are completely identical
Do you mean this? jsfiddle.net/T3ZAg In that case, your issue is caused by jQuery’s .css() method which is setting the color as an inline style. This inline style then overrides the :hover declaration from the style-sheet.
I’ll work on the fiddle right now — but the issue isn’t losing the original :hover, its that the new :hover isn’t taking effect. And, is it normal for the inspector to show the color values as hex on the page load, but rgb after the changes? I understand that they end up being the same value, but can they be interpreted differently for CSS?
2 Answers 2
There’s a problem here, «Javascript doesn’t support getting or setting the attributes of pseudo selectors, meaning that you cannot get the :hover css style directly.» [source]
JQuery, does however have a .hover() function which could probably be used to change the hover item’s css indirectly. Example: jQuery CSS Hover
Edit: Here is a fiddle where I show it working: http://jsfiddle.net/TvfB9/1/
- I created a global variable in the javascript (outside of the document ready function): hover_color = «#00FFff»; for storing the user’s «new» or «desired» hover color. Ideally, you’d probably want to initialize this to whatever is in the stylesheet on page load.
- Then inside the change color function, I update the global variable: hover_color = hover_text_color; . In this example I’m assigning it the variable you were already using in your fiddle, but hover_text_color should be replaced with whatever value the user picks from your picker controls.
- I added a hover function to the document ready javascript object, and set the CSS for the .nav class from the global variable.
$('.nav').hover(function() < $(this).css('color', hover_color ); >, function() < $(this).css('color', '#ffffff'); >); Basically, when you set the CSS with .CSS it actually applies the CSS to the «style» attribute of the particular tags that have that class attached, it doesn’t modify the CSS file in memory or anything. So by the time you run the hover function, it’s pretty much forgotten about the changes you tried to make to your CSS class.
For the sake of laziness I only make the foreground color change, and left the non-hover foreground color hardcoded, obviously, you won’t want to 😉
jQuery set CSS color as HEX instead of RGB
I am trying to create a jQuery hook which will read and set all colors as hex values instead of RGB. I have found a hook that will properly read the color as HEX but I am not sure on how to modify it to write CSS colors as HEX. So for example I would like $(«h1»).css(‘color’, ‘#333333’); to inline style h1’s with «style=’color:#333333;'» instead of the current RGB equivalent. The hook I am using to return read colors as hex is:
$.cssHooks.color = < get: function(elem) < if (elem.currentStyle) var bg = elem.currentStyle["color"]; else if (window.getComputedStyle) var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("color"); if (bg.search("rgb") == -1) return bg; else < bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) < return ("0" + parseInt(x).toString(16)).slice(-2); >return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]); > >> Update I was able to accomplish it in a super roundabout way by getting all the elements styles converting any colors to HEX and the rebuilding the styles and setting it via $(elm).attr(style, styles); Seems very hacky and convoluted but it works.
Not sure I get it, but it’s up to the browser what is actually set, and more importantly returned, so there’s no guarantee the browser will return rgb or rgba, or for older browsers even hex ?
I am creating a tool which creates HTML for emails. Since a lot of email clients don’t handle RGB colors well I want all colors set to be in HEX format. Right now the tool is just for myself and I am using the latest version of Chrome to test.
jQuery .css color change not working
I am trying to change the color of my text on my lavalamp menu I am using the following plugin http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery What I have done is the following
$('#lava').mouseleave(function () < $('#lava li').removeClass('selected'); $('#lava li').css(); //select the current item $(this).addClass('selected'); $(this).css("color", "white"); >); however when the mouse leaves it changes all the text to black which is correct but then the $(this) does not change to white here is a copy of the code and working demo http://jsfiddle.net/aSr3J/
What is $(this) supposed to be ? Because, form your code, it looks like $(this) refer to a ul element. If you want to work on a li of this ul, I’m afraid, your code is wrong.
I am not sure about your specific issue, but please learn to and get in the habit of chaining your jQuery statements, e.g. $(this).addClass(‘selected’).css(«color»,»white»); see ejohn.org/blog/ultra-chaining-with-jquery It is much cleaner to read AND it is far more efficient — each $(..) constructs a new jquery object, re-finds the object, etc. No sense in duplicating that work. Also — curious that you use css() in one case and css(«color», «white») in another — these are the same thing, it’s odd to express differently within 3 lines of each other.
How can it be correct that all the text turns to black when you specify that it should turn to white $(‘#lava li’).css(