Develop Reference

Change CSS of sibling image on hover

I have a DIV with 9 images and I would like to change CSS property of 8 images unlike one that user is hovering.
Here is what I have:
HTML:
<div class="gallery">
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
<img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" />
</div>
JS:
function hoverPics() {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(this).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}
Actual page
The best example of what I'm looking for is Gallery at the bottom of the page after age validation. Here
Cheers

I strongly recommend against using inline JS. Since you're already using jQuery, you can simply listen to the .hover() event (which is basically a shorthand for .mouseenter() and .mouseleave()), and use DOM traversal methods:
$(function() {
$('.image-hover').hover(function() {
$(this).css({
'-webkit-filter': 'grayscale(0%)'
}).parent().siblings().find('.image-hover').css({
'-webkit-filter': 'grayscale(100%)'
});
}, function() {
$('.image-hover').css({
'-webkit-filter': 'grayscale(0%)'
});
});
});
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/5kw2hs7f/
There is also a pure CSS method (slightly hackier), although it allows less granularity over control compared to the jQuery solution. The way is to set all .image-hover to grayscale, but only allow colour on the specific .image-hover:hover.
The only problem is that we are setting all images to greyscale as long as the parent container .gallery is hovered upon, and this might not be the desired behavior. See fiddle here: http://jsfiddle.net/teddyrised/88v8ga5z/
.gallery:hover .image-hover {
-webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
-webkit-filter: grayscale(0%);
}

Pass this in function to access them
onmouseover="return hoverPics(this)" onmouseout="return changeMeBack()"
in js
function hoverPics(obj) {
$(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");
$(obj).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}

try to verify if is hover, like this:
function hoverPics() {
if( ! $('.image-hover').is(':hover') ) {
$(".image-hover").css({ "filter": "gray", "-webkit-filter": "grayscale(100%)" });
}
}
function changeMeBack() {
$(".image-hover").css("-webkit-filter", "grayscale(0%)");
}

I do not have much experience with jQuery however if attempting this I would pass through the id of the current element when the function is called, on hover. I would then use a loop to run through the images, within this loop I would check the id against the current image and if true would not change the grey scale.

change css of body on mouseover

I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!

fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.

.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO

Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).

I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.

Change back css after .slideToggle()

I have this issue: I want to set background color on hover element and slidetoggle a div inside it. But when item slide out i would like to set another background color to the element. Check the code:
<div class="menu segundoitem institucional"><span class="textoMenu">Institucional</span>
<div id="submenu-01">Institucional</div>
</div>
And the Jquery
$(".institucional").hover(function(){
$('#submenu-01').stop().slideToggle();
$(this).css("background", "#380606");
});
As you can see, ".institucional" background is set to #380606, but when mouse leave and #submenu-01 disapear, ".institucional" keeps with the background #380606... I would like to make it background #FFFFFF

Use two seperate functions for mouseenter and mouseleave, and you can set whatever you want
$(".institucional").on({
mouseenter : function() {
$('#submenu-01').stop().slideDown(400);
$(this).css("background", "#380606");
},
mouseleave : function() {
var self = this;
$('#submenu-01').stop().slideUp(400, function() {
$(self).css("background", "#FFF");
});
}
});

Is there an easier way to show/hide an element on a mouse action?

I have this segment of code here, which I seem to use something similar all the time:
$(".fieldv").live('mouseenter', function() {
$(this).children('.edit-icon').show();
}).live('mouseleave', function() {
$(this).children('.edit-icon').hide();
});
Is there an easier, simpler, or cleaner way to show / hide an element on a mouse action whether it be hovering or clicking an element? Or something of the like...

Why use JavaScript?
You will need to hide the icon by default:
.fieldv .edit-icon { display: none; }
Then this CSS applies on hover (and ONLY on hover)
.fieldv:hover .edit-icon { display: block; /* or inline, etc. */ }

You could try this:
$(".fieldv").hover(function(){
//mouseover
,function(){
//mouseout
});

$(".fieldv").hover(function() {
$(this).children('.edit-icon').show();
}, function() {
$(this).children('.edit-icon').hide();
});
use $(".class").hover(function(){}, function(){});

Animate and add class at the same time

I'm trying to add a class with top and left properties for animation, but the div just shifts to the added class attribute without animating.
#myClass.move {
top:100px;
left:100px;
}
The goal is to have the animation happen right when the class is added and animate based on the properties of the added class.
var shiftTop = parseInt($(".move").css("top"));
var shiftLeft = parseInt($(".move").css("left"));
$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {});
Is this possible?

Use jQueryUI.
Demo here
$("#myClass").click(function() {
$(this).addClass("move", 1000);
});​

$('#myClass').animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {
$(this).addClass('#myClass');
});

Yes it's possible:
Add class before animate:
$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000);
demo
Add class after animate:
$("#myClass").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {
$(this).addClass('move');
});
demo

I'm assuming that you have an element with class .move in your document already, from which to read the shiftTop and shiftLeft values.
If all you need to do is change the top and left attributes you can remove the addClass step entirely, since the animate function adds them inline. If you do need the class applied after, do it in the animate callback.
Depending on your compatibility requirements you could also do this entirely with CSS, using transitions.