Develop Reference

make elements change color with button hover

I seem to be struggling with this.
Im want to make other elements change with button hover.
what im trying to do is , when you hover on the "continue reading" button on the homepage , then for the title and post meta to change color.
The site url is:
http://staging.conversationlab.com/lions_valley/

You can use the hover() method on the more links to trigger a function that applies or removes styling to their siblings like...
$(".more-link").hover(
function() {
$(this).addClass("your-class-with-styling");
$(this).siblings(".post-meta").addClass("your-class-with-styling");
$(this).siblings("h2").addClass("your-class-with-styling");
},
function() {
$(this).removeClass("your-class-with-styling");
$(this).siblings(".post-meta").removeClass("your-class-with-styling");
$(this).siblings("h2").removeClass("your-class-with-styling");
}
);
I would probably add a class to the h2 to target, though, to make sure that it wouldn't conflict with any other h2s that MAY end up in those article sections at some point in the future.

You probably just need to add some css:
<style>
#buttonid:hover {
background-color:#ff0000;
}
</style>
where the #buttonid is declared on your button:
<button id="buttonid"> my button</button>
more info = better answer/s

You can see here how to do it. https://jsfiddle.net/5aybmjk7/
Basically I just added an ID / additional class to your code and then attached the relevant jquery that used mouseover and mouseout to highlight/unhighlight the title by adding or removing a class with CSS attached to it.
$('#here').mouseover(function () {
$(".highlightMe").addClass('colored');
});
$('#here').mouseout(function () {
$(".highlightMe").removeClass('colored');
});

jQuery('.et_pb_posts article').find('.more-link').on('hover', function() {
jQuery(this).find('.post-meta a').addClass('YOUR_CLASS')
});
Try that

change class of element, on each mouse click

I want to change class of element, everytime I click on it.
on css section I have:
myButton.btn_first_look {
/* some atributes */
}
myButton.btn_second_look{
/* some atributes */
}
little jquery:
$(document).ready(function(){
$('#myButton').click(function() {
$(this).toggleClass('btn_first_look');
$(this).toggleClass('btn_second_look');
})};
So, when I click on element, I expect jquery script to change element class from btn_first_look to btn_second_look and otherwise.
But boom. Nothing happend

toggleClass will take care of add and remove by itself
$('#myButton').click(function() {
$(this).toggleClass('btn_second_look btn_first_look');
};
Demo Fiddle

Use removeClass() and addClass() respectively
$('#myButton').click(function() {
//if button has class btn_first_look
if($(this).hasClass('btn_first_look')){
$(this).removeClass('btn_first_look');
$(this).addClass('btn_second_look');
}
//if button has class btn_second_look
else if($(this).hasClass('btn_second_look')){
$(this).removeClass('btn_second_look');
$(this).addClass('btn_first_look');
}
});
This adds whichever class the button doesn't have, and removes the class it does.

Try this.
If your element has class btn_first_look from the start, you can write
$(element).toggleClass("btn_first_look btn_second_look");
This will remove class btn_first_look and add class btn_second_look. If you do that again, it will remove class btn_second_look and reinstate class btn_first_look .

Add a parenthesis at the very end. Your first (function() has no close, so it won't work.

That will work for you
$(document).ready(function(){
$('#myButton').click(function(){
$(this).toggleClass('btn_first_look btn_second_look');
});
});

jQuery show hide and active class in one button

I have this code and I want to add active class to button .loginhead (to remove and add class when click and when content show and hide). How I can do that?
$(".top .login").hide('', function () {
$('.loginhead').removeClass("active");
});
$(".loginhead").show();
$('.loginhead').click(function () {
$(".top .login").slideToggle();
$('.loginhead').addClass("active");
});

use toggleClass(). If I'm understanding you right. Here's a link to documentation: http://api.jquery.com/toggleClass/
$('.loginhead').toggleClass("active");

change div class onclick on another div, and change back on body click

Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.

Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example

You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});

I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});

You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle

var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/

Is there a way to detect mouse press in jQuery?

I want to add a class to a link when it is clicked, but I can't use:
$('a.someLink').click(function() {
// code
});
since click seems to detect when a user clicks and lets go of the mouse clicker on an element. I need to add the class as soon as the user has clicked on the element, even before he lets ago of the mouse clicker and after he lets go I need the class to be removed.
Basically I'm trying to mimic css's active state on links:
a:active
How can this be done?

mousedown() would be what you are looking for in the jQuery docs

You can use $('a.someLink').mousedown(function() { //code }); instead

$('a.someLink').mousedown(function() {
//code
});
http://api.jquery.com/mousedown/

With $('a.someLink').mousedown() you can add the class, and then with $('a.someLink').mouseup() you can remove it.
mousedow(): http://api.jquery.com/mousedown/
mouseup(): http://api.jquery.com/mouseup/

Try mousedown which is triggered even before click event.
$('a.someLink').mousedown(function() {
// code
});