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()
Related
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?
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");
});
So, I know how to change an attribute for the same element you hover over...
$(".click2play").mouseover(function()
{
$(this).css({'visibility' : 'hidden'});
});
question Can I do the same thing but to affect another element only within the same 'click2play' div that was hovered?
maybe like?
$(".click2play").mouseover(function()
{
$(this).(#someotherdiv).css({'visibility' : 'hidden'});
});
Thanks everyone!
This code targets a div, within the current .click2play element. I believe that's what you were asking for :)
$(".click2play").mouseover(function() {
$('div.class_name', this).css({'visibility' : 'hidden'});
});
not very clear from the ques what you wanna do so ill ans for all the options i can guess of
1.if you wanna hide all the elements of class .click2Play then use
$('.click2Play').hover(function(){$('.click2play').hide()});
2.if you want to just hide the current element of all the elements having this class use
$('.click2Play').hover(function(){$(this).hide()});
3.if you wanna generalize it then you can use.selector property of the jquery object so that you would be able to use it like
$('.click2Play').hover(function(){$($(this).selector).hide()});
so now if you will change the class name from .click2Play to some other class it will work nicely and will hide all the elements of that class.
4. if you want to hide some element inside that of current element then
$('.click2Play').hover(function(){$(this).children('selector_of_child').hide()});
5.if all the elements of this class have an element inside them having some other class and you wanna hide them all then simple use each like this
$('.click2Play').hover(function(){$('.click2play').each(function(){$(this).children("selector_Of_Child").hide()})});
I would do like this:
$(".click2play").mouseover(function(){
$(this).hide();
});
But maybe it isn't what you want to do?
I suppose this :):
$(".click2play").mouseover(function(){
$(this).css({'visibility' : 'hidden'});
});
or better
$(".click2play").mouseover(function(){
$(this).hide();
});
You want to change some other div? Why would you need $(this)?
$(".click2play").mouseover(function(){
$("#someotherdiv").hide();
});
To change a single css attribute you can do:
$(".click2play").mouseover(function(){
$(this).css('visibility', 'hidden');
});
I hope it helps
(consider to see this link: http://marakana.com/bookshelf/jquery_tutorial/css_styling.html )
I believe most of the answers didn't payed attention to the question, which asks about removing a class. Here is the answer to both questions:
$('.click2play').bind('mouseenter mouseleave', function () {
$(this).removeClass('click2play'); // This line removes the current object's class click2play
$('jQUerySelector').removeClass('click2play'); // This will remove another element's class click2play
});
Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:
$("*").hover(
function () {
$(this).addClass('hover'); ;
},
function () {
$(this).removeClass('hover');
}
);
and CSS
#hover {
background-color:#CC0000;
}
but somewhere there is an error???
You should be using a . rather than a # to denote a class selector.
.hover {
background-color:#CC0000;
}
Also, note that using * as a jQuery selector will select everything, including the body element etc. I'm not sure from the context of the question whether this is what you're after or not.
Furthermore, it would be easier to just use the CSS pseudo-class :hover to apply a style to a hovered element. Here's a reference for how to use it: http://reference.sitepoint.com/css/pseudoclass-hover
You adding class "hover", but using CSS # selector for ids, use .hover instead of #hover
jlis solution will work, but there is a better way:
Use the css pseudo class ":hover" instead:
*:hover {
background-color: #CC0000;
}
should work with most common and actual browsers.
(IE 6 is not an actual or common browser!)
I am loading data dynamically by AJAX into a cluetip (http://plugins.learningjquery.com/cluetip/#).
I want to toggle the results from a link like so:
$(document).ready(function() {
$("#calendarLink").live("click",( function() {
$("#result").toggle();
}));
});
For some reason the above will not work. Can you suggest an alternative?
Couple of questions/points
Do you really need to use .live() You're using an ID selector, so there should only ever be one of these.
Also, you have an extra set of brakets. Probably not a problem, but you could remove them:
$(document).ready(function() {
$("#calendarLink").click( function() {
$("#result").toggle();
});
});
Perhaps the toggle() function isn't be used properly?
See here http://api.jquery.com/toggle/
I'm not sure if this is new functionality only for jQuery 1.4 but it appears the toggle function requires parameters.
The following code is correct (demo online - http://jsbin.com/ehate/edit):
$("#calendarLink").live("click", function(e){
$("#result").toggle();
});
You use $.live() only if #calendarLink will be added dynamically later. If it isn't, use a regular click:
$("#calendarLink").click(function(e){
$("#result").toggle();
});
If this is not working for you, be sure to check your #calendarLink and #result elements in your HTML. Make sure the ID values are correct. Mainly, be sure your casing is correct.
Two elements in the same page can't have the same id.
u used
$("#result").toggle();
'I want to toggle the results from a link ...'
So the result elements should have the same class , not id.
The code should be :
$(".result").toggle();
'#' changed into '.'