We Keep Coding

How to change CSS over selected element only using $(this)

I'm trying to make it where when the user .mouseover() the .featured_products the .featured_products, and the .button will apply the CSS affect to the selected container. The problem i'm encountering is it changes the .css of both the .feature_products containers. I'd like it to only change the one that's being .mouseover(). I tried using $(this) but i'm not understanding it correctly.
$(".featured_products").mouseover(function(){
$(".fp_button").css("background-color", "#00addc");
$(".fp_button").css("color", "#FFFFFF");
$(this).addClass("fp_hover");
});
$(".featured_products").mouseleave(function(){
$(".fp_button").css("background-color", "white");
$(".fp_button").css("color", "#000000")
$(".featured_products").removeClass("fp_hover");
});
Here is my Demo

You can use the second parameter in the selector to denote a parent, like:
$(".fp_button", this).css("background-color", "#00addc");
See it here: http://jsfiddle.net/4417zugn/31/
You can also do something like:
$(this).find(".fp_button")...
etc. There are many ways.
One thing I'd suggest is to change the class name instead of modifying individual CSS rules, like this: http://jsfiddle.net/4417zugn/33/
Last thing, this is all possible using only CSS, like this: http://jsfiddle.net/4417zugn/35/

There's no need to use jQuery to alter the CSS you can do that in the CSS itself using the :hover selector. You can then use jQuery to toggle the 'fp_hover' class.
$('.featured_products').hover(function(){
$(this).toggleClass('fp_hover')
})
https://jsfiddle.net/Lozgnz84/

$(".fp_button") is common for both the divs; so
instead of writing:
$(".fp_button").css("background-color", "white");
Write:
$(this).find('.fp_button').css("color", "#FFFFFF");
Hence, your code becomes
$(".featured_products").mouseover(function(){
$this = $(this);
$this.find('.fp_button').css({"background-color":"#00addc", "color":"#FFFFFF"});
$this.addClass("fp_hover");
});
$(".featured_products").mouseleave(function(){
$this.find('.fp_button').css({"background-color":"white", "color":"#000000"});
$this.removeClass("fp_hover");
});
demo here: http://jsfiddle.net/znnamrwn/

What you've described can be done without jQuery. If however you would like to use jQuery you could simply toggle a class on the product element.
$('.featured_products').on({
mouseenter: function() {
$(this).toggleClass('fp_hover');
},
mouseleave: function() {
$(this).toggleClass('fp_hover');
}
}, '.featured_product');
http://jsfiddle.net/bradlilley/uwxsr4hu
You can also do the above without jQuery by simple adding the following hover state in your css.
.featured_product:hover .fp_button {
background: #f00;
color: #000;
}
https://jsfiddle.net/bradlilley/9mwxo9o2/6/
Edit: You should also avoid using mouseover and use mouseenter instead.
Jquery mouseenter() vs mouseover()

Replace the class's suffix while preserving its prefix

I would like to replace the class's suffix while preserving its prefix
DEMO:
http://jsbin.com/vozufura/4/edit
The desired code should make all the div black.
So that:
class= menu-456 AND menu-789 should be replaced and become menu-123
All the div should be black as a result
HTML:
<div class="menu-123">black</div>
<div class="menu-456">green</div>
<div class="menu-789" >red</div>
CSS:
.menu-123 {
background: black;
}
.menu-456 {
background: green;
}
.menu-789 {
background: red;
}
Javascript (Jquery):
/* I am not looking for javascript like removeClass nor addClass,
nor do i want to change the background.
I wanted to know if it is possible to REPLACE the suffix of a class*/

Use a combination of removeClass() and addClass() functions provided by jQuery, like this:
$(document).ready(function(){
$(".menu-456,.menu-789").removeClass("menu-456 menu-789").addClass("menu-123");
});
This code runs when the DOM is loaded and what it does is as follows:
It selects all elements with either class menu-456 or menu-789.
It removes classes menu-456 and menu-789 from those elements.
It gives the elements the class menu-123.
FIDDLE

your jquery
JS:
$(document).ready(function () {
$('[class^=menu-]').not('.menu-123').removeClass().addClass('menu-123');
});
you can you addClass and removeClass
DEMO

Changing and messing with classes is easy with jQuery.
Take a look at .addClass .removeClass.
You can use the Attribute Contains Selector or Attribute Contains Prefix Selector to be more general and effective in your code.
For example, if you want menu-123 to be the only new class on the element:
$("div[class|='menu']").attr('class', 'menu-123');
or, if you want to get clever:
$("div[class|='menu']").attr('class', function(i, c){
return c.replace(/(^|\s)menu-\S+/g, 'menu-123');
});
thanks to this answer.

how do i remove classes with jQuery?

how do i remove classes with jQuery?
I have this "template" i am working on and i want a "settings" box to the left where the user can change the "color scheme" of the navigation.
I have like 5-10 colors and i cant get it to work.
$(".color-orange").click(function () {
$("#nav").addClass("color-orange");
});
How can i then remove the class "color-orange" and add a new class if someone clicks on green?
Well i used this..
$(".color-green").click(function () {
$("#nav").removeClass("color-orange");
$("#nav").addClass("green");
});
But that just takes orange away. And will not work if you clicked another color..
Sorry for my english, and yes. Its my first time here :)
Kind Regards / Albin

Try this:
$("#nav").removeClass().addClass("green");
Without arguments removeClass will remove all the classes.
Also don't reselect $("#nav") again and again, use method chaining, this increases performance.

The below code will simply overwrite existing classes to whatever you set (in this case "green").
$("#nav").attr("class", "green");
Since this has gained enough upvotes, I'll tell you why this is kind of better answer than the above one. The one with removeClass().
First, you get the required element, that is $("#nav").
Then, you call a property of JQuery, removeClass().
Then, you again call another property of JQuery, addClass().
In the solution I suggested:
First, you get the element, then call the propery attr(), and that's it.
So, it's one step lesser.

How about this
$('[class^="color-"]').each(function() {
$("#nav").removeClass().addClass($(this).attr("class"));
}
or as xFortyFourx pointed out:
$('[class^="color-"]').each(function() {
$("#nav").attr("class",$(this).attr("class"));
}
Alternative - if I assume you have
.green { color:green; .... } /* for the nav */
.color-green { color:green; .... } /* for the settings */
you can do
$('[class^="color-"]').each(function() {
$("#nav").attr("class",$(this).attr("class").replace("color-",""));
}

Use removeClass and do not pass any class to removeClass and it will remove all classes that element has.
$(".color-green").click(function () {
$("#nav").removeClass().addClass("green");
});

$(".color-green").click(function () {
$("#nav").removeClass("color-orange");
$("#nav").removeClass("next-color");
$("#nav").removeClass("another-color");
$("#nav").removeClass("yet-another-color-but-green");
$("#nav").addClass("green");
});

Problem setting style for a element created using DOM

I am facing problem in setting style for a 'tr' element,created using DOM inside javascript.
the code is like-
var tr = document.createElement("tr");
tr.onmouseover=function(){this.style.backgroundColor='#fbf9e0';};
or
tr.attachEvent('onmouseover',this.style.backgroundColor='#fbf9e0';);
am runnig this code in IE-7. Any other approch?

Is jQuery an option? If so, this becomes pretty simple:
$('tr').live('mouseover', function() {
$(this).css('background-color', '#fbf9e0');
});
This will attach the mouseover event handler to every TR, whether it's present in the DOM now or will be in the future.

Using attachEvent allows you to attach more than one event to an object.
Using onmouseover when you set it, it can be overridden

As a comment mentioned, I would suggest the following: Either use a global style, or a class-specific one with the pseudo-class :hover.
tr:hover {
background-color: #fbf9e0;
}
/* or */
tr.someClass:hover {
background-color: #fbf9e0;
}
If you go that class route, make sure to add it to the object:
<script>
tr.className = 'someClass';
</script>

apply javascript functions to all objects in a css class

I have this code:
$("#SidingPainting").hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
)
however I have many, like a hundred divs that I want to apply these same functions to!
Is there a way that I could make a css class and apply it to each div and then apply these functions to the css class?
Or any other ideas on how to make my life easier?

With jQuery's $ you can use CSS selectors. So just write .className instead of #id
$(".hoverClass").hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
)
For this you should use the :hover pseudo-class, but IE6 only supports it on the a-tags. So you need a JavaScript fallback like this for it.
Detecting IE6 using jQuery.support

You don't even need JavaScript if you simply want to change the class on hover. Just give all your divs a common class and use the CSS :hover pseudo-class to change styles on hover:
.SidingPainting { /* this is a class, not an ID */
...
}
.SidingPainting:hover {
...
}