I have a menu where on every hover of its links the background color of my page changes.
Now, let's say that my default index.html color is blue, and when I hover on about and contact I have yellow and red.
If I click on the about page its background color will be yellow, and if I hover on home it will go back blue.
What happens is when I mouseOut back to the page, the background changed to blue again, same if I'd hovered on contact.
Here there's my code in JS
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
}, function() {
$('body').css('background', '');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
}, function() {
$('body').css('background', '');
});
And here there is the menu
<a id="about" href="about.html">about</a>
<a id="contact" href="contact.html">contact</a>
I assume I should do something like check if the current background color matches the hovered one, on mouseOut keep that color, otherwise set it to the initial one.
I'm not an expert of JS, especially when it comes to conditions.
Anybody could help me out?
Thanks!
If you want the color to stay the same after hovering, then you should remove the second parameter of hover():
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
});
});
https://jsfiddle.net/as9jpopd/
** EDIT **
If you want the color only to change when the user moves the mouse over the link and then back, then your code should work, only that closing brackets are missing:
$(document).ready(function() {
$('#about').hover(function() {
$('body').css('background-color', 'yellow');
}, function() {
$('body').css('background', '');
});
$('#contact').hover(function() {
$('body').css('background-color', 'red');
}, function() {
$('body').css('background', '');
});
});
Thanks to Joachim, but unfortunately that did not work. I uploaded an early stage of the website so you can take a look at the problem and the behaviour of the bg. http://mircofragomena.com/
As you see on the front page the bg is white, but when you hover changes. If you click on pickabrew, you will see the page in yellow as when hovered, but if you go again on the menu hover/out, the page goes back in white as the front page. It should stay yellow though, as it should happen with every other color/page.
I'm now using this other code
$(function() { // Shorthand for $(document).ready(function() {
var body = $('body');
var bg = body.css('background-color');
$('ul.nav a').hover(function() {
body.css('background-color', $(this).data('bgColor'));
}, function() {
body.css('background-color', bg);
});
});
related with this one on the links
<li>Posters</li>
though it does not work.
Is this a good starting code?
Related
Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
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");
});
}
});
I'm trying to create something real simple. But I don't know why it isn't working?
This is what I'm trying: http://www.yannickluijten.be/test
when I hover the green, blue, gray or yellow div the image in the middle has to rotate.
Here is the code:
$(document).ready(function() {
$('#green').hover(function(){
$('#rotator').addClass('rotate_green');
},
function(){
$('#rotator').removeClass('rotate_green');
});
$('#blue').hover(function(){
$('#rotator').addClass('rotate_blue');
},
function(){
$('#rotator').removeClass('rotate_blue');
});
$('#gray').hover(function(){
$('#rotator').addClass('rotate_gray');
},
function(){
$('#rotator').removeClass('rotate_gray');
});
$('#yellow').hover(function(){
$('#rotator').addClass('rotate_yellow');
},
function(){
$('#rotator').removeClass('rotate_yellow');
});
});
You forgot to include jQuery.js on your code.
Add this line in HEAD section
http://code.jquery.com/jquery-1.9.1.js
I'm trying to adapt Gaya Design's Animated Tabbed Content http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/ for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
}
$(document).ready(function() {
TabbedContent.init();
});
And here is a link to what I'm trying to achieve. Link
Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!
Thanks
What about triggeting the mouseover event of the first item:
$('.tabs').mouseout(function(){
$(this).find('.tab_item:first').mouseover();
});
I have a CSS menu that sets the parent li's color when hovering over it and it's child ul (submenu). Basically, when you hover over the menu, it changes colour and remains that way until you mouseoff the menu and it's submenu. It looks nice.
I've added some jQuery code to change the colour of the menu items when until a certain page is opened. Then, those menus will fade back in and regain colour. At which point, waiting for a hover to change colour.
The problem I'm having is, when you change the colour back to it's original state (set in CSS) with jQuery, it removes the :hover class preventing the colour change when hovering over it and it's child submenu. Any ideas on how to fix this? Is there a selector with jQuery that'll allow me to set the :hover class back to normal?
/* ---- Menu Colours ---- */
$(document).ready(function()
{
var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f'];
var counter = 0; // Loop for the colurs
var status = 0; // Status of the colours (greyed out or visible)
$('ul.menu-horiz').children('li').children('a').hover(function()
{
$(this).parent()[0].css('color', '#d50091');
}, function()
{
$(this).parent()[0].css('color', '#b6b6b6');
});
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css({opacity: 0.2, color: '#' + colours[counter]});
counter++;
});
$('.haccordion .header').click(function()
{
if (window.location.hash.substr(1) == 'photogallery')
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
if ($(this).css('opacity') != '1.1')
{
$(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6');
}
});
}
else
{
counter = 0;
if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2')
{
$('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function()
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css('color', '#' + colours[counter]);
counter++;
});
});
}
}
});
});
You should be able to use the :hover selector and pass in an over() and out() function that set and unset the hover color respectively. See the :hover documentation for more.
Simple Example
given the CSS:
<style>
.blue { background-color: blue; }
.red { background-color: red; }
</style>
do something like this:
$('li').hover(function() {
$(this).removeClass('red');
$(this).addClass('blue');
},
function() {
$(this).removeClass('blue');
$(this).addClass('red');
})
I was having issues applying the colour change to the when hovering over it's parent (as you can see in the code posted above).
Took me until now to realise it needed to be changed to
$('ul.menu-horiz').children('li').hover(function()
{
$(this).children('a').css('color', '#d50091');
}, function()
{
$(this).children('a').css('color', '#b6b6b6');
});
Ignore me >_>