I have 4 div's set in following manner:
<1st div> <2nd div>
<3rd div> <4th div>
Whenever, mouse hover over any of the div, div background should be changed.
How can I achieve this. Use of jQuery is also allowed.
Thanks
You can achieve this with simple CSS pseudo-class :hover:
div:hover{
background:url('your_background_path')}
Here is a solution using jQuery.
$('div').hover(function() {
$(this).css({ backgroundImage: 'url(whatever.jpg)' });
}, function() {
$(this).css({ backgroundImage: 'none' });
});
However, if I was doing this, I'd add a class and use CSS to change the actual background image.
You could do it with plain JavaScript too...
var divs = document.getElementsByTagName('div');
for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
divs[i].onmouseover(function() {
divs[i].style.backgroundImage = 'url(whatever.jpg)';
});
divs[i].onmouseout(function() {
divs[i].style.backgroundImage = 'none';
});
}
And you could even do it with CSS only...
div:hover {
background-image: url(whatever.jpg);
}
assuming those are the only 4 divs...
<script type="text/javascript">
$( document ).ready( function() {
$( 'div' ).mouseover( function() {
$( this ).css( 'background-color', 'red' );
});
$( 'div' ).mouseout( function() {
$( this ).css( 'background-color', 'white' );
});
});
</script>
If they are -not- the only 4 divs, you'll need to study up on jQuery selectors. Maybe give the 4 divs a specific class name and reference that.
<script type="text/javascript">
$(document).ready(function () {
$('#div1').mouseover(function () {
$(this).css('background-color', 'red');
});
$('#div2').mouseover(function () {
$(this).css('background-color', 'green');
});
$('#div3').mouseover(function () {
$(this).css('background-color', 'blue');
});
$('#div4').mouseover(function () {
$(this).css('background-color', 'aqua');
});
});
</script>
if you need four different image on hover you can simply give four differnet class or id and here i used id. css eg as
#firstdiv:hover{
background-image: url:('url');
}
#secondiv:hover{
background-image: url:('url');
}
and similarly remaining two.
Related
I have a div with 2 span as a link, I want to add active class on both span when mouse enters the container div i.e. fos-search-items
var $hover_element = $('.fos-search-items');
.mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
})
.mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
})
You should use $hover_element on event while mouseenter and mouseleave
Option 1 Demo Here
var $hover_element = $('.fos-search-items');
$hover_element.mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
});
$hover_element.mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
});
Option 2 Demo Here
Just remove the ; after the $('.fos-search-items')
var $hover_element = $('.fos-search-items').mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
}).mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
});
You have not attached the events correctly.mouseenter and mouseleave should be attached to DOM elements jquery object.Like this:
$('.fos-search-items').mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
})
$('.fos-search-items').mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
})
also, you can rather use .hover() with two function argumenents for mousenter and mouseleave:
$('.fos-search-items').hover(function(){
$(this).find('span').addClass('fos-db-active')
},function(){
$(this).find('span').removeClass('fos-db-active')
});
Try this
var $hover_element = $('.fos-search-items');
$hover_element.mouseenter(function() {
$( this ).find( "span" ).addClass('fos-db-active');
})
$hover_element.mouseleave(function() {
$( this ).find( "span" ).removeClass('fos-db-active');
})
Working demo
I use my code for change css after click icon :
$(function () {
$(".icon-medium.icon-search").click(function () {
$(".nksub-tab-icon").addClass("newClass", 1000, callback);
});
function callback() {
setTimeout(function () {
$(".nksub-tab-icon").removeClass("newClass");
}, 1000);
}
});
My CSS:
<style>
.newClass { background-color:yellow; }
</style>
When I click icon change color but after I click but doesn't remove class.
For test website here
I would like change color and after with another click recover start style.
Try putting this code in <script> tags.
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").toggleClass("newClass");
});
If you want to provide a delay then use the following code
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").delay(1000).queue(function(next){
$(this).toggleClass("newClass");
next();
});
});
Check here: http://jsfiddle.net/zgsxoq3v/
I am using following code to add line to my submenu :
$("li.mega-menu-megamenu a").hover(function(){
$( "<div class='remove'><hr /></div>" ).insertAfter("#mega-menu-primary-2 li:last-child" );
});
Its working perfectly fine.But the issue is that I want to remove that tag when there is no hover.
I have tried this : $("li.mega-menu-megamenu a").unbind('hover'); But by doing this, it will not add html tags at all.
How can I remove line when there is no hover on menu ?
You can use mouseout event for that
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").remove();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
});
Another possible solution is, instead of adding and removing the element you can just hide/show it.
$(document).ready(funnction() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
$(".remove").hide();
$("li.mega-menu-megamenu a").mouseout(function() {
$(".remove").hide();
});
$("li.mega-menu-megamenu a").mouseenter(function() {
$(".remove").show();
});
});
I would opt for hide/show so you don't keep adding/removing from the DOM.
// Add the element to the DOM once and then hide it
var $removeElement = $( "<div class='remove'><hr /></div>" )
.insertAfter( "#mega-menu-primary-2 li:last-child" )
.hide();
// On mouseover we show the $removeElement and mouseout will hide it
$("li.mega-menu-megamenu a")
.hover(function(){ $removeElement.fadeIn(); },
function() { $removeElement.fadeOut(); }
);
I used fadeIn/fadeOut but you can use show/hide instead if prefered.
You can pass 2 functions to hover. Second will be called when mouse is exiting the element.
$("li.mega-menu-megamenu a").hover(function() {
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},
function() {
$(".remove").remove();
});
Another way:
$('li.mega-menu-megamenu a').on({
'mouseenter':function(){
$("<div class='remove'><hr /></div>").insertAfter("#mega-menu-primary-2 li:last-child");
},'mouseleave':function(){
$(".remove").remove();
}
});
Hi I was wondering if there was anyway to dynamically change the class of a list when you hover over it. Here is my code and fiddle. When I hover over the li I want it to change the class. and on mouseout I want it to change back to original.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('.navi').addClass('.navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
http://jsfiddle.net/Samfr/8/
I think hover might be a little better for what you are doing.
http://api.jquery.com/hover/
Also, I'm not too clear on what you are asking but one of the examples on the above hover documentation page seems to describe something similar.
$( "td" ).hover(
function() {
$( this ).addClass( "hover" );
}, function() {
$( this ).removeClass( "hover" );
}
);
You had an extra period when adding and removing the class. Those should only be used to select the elements not change the class name.
$('.navi > li').on("mouseover", function () {
($(this)).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
try this:
define a new class, for example dinamic-li
$('.dinamic-li').on("mouseenter", function () {
$(this).addclass('navi');
$(this).removeclass('navi2');
});
$('.dinamic-li').on("mouseleave", function () {
$(this).addclass('navi2');
$(this).removeclass('navi');
});
Will this work?
JSFiddle
Jquery:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
$(this).attr('class', 'red');
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).attr('class', '');
});
there is my solution:
$('.navi > li').on("mouseover", function () {
$(this).addClass('active').siblings().removeClass(active);
$('.hover-name', this).show();
}).on("mouseout", function() {
if( $(this).hasClass('active'))
$(this).removeClass('active');
$('.hover-name').hide();
});
Working fiddle
Why not use a CSS solution, it's much easier:
.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }
Check your updated Fiddle
http://jsfiddle.net/Samfr/14/
This is that what u mean...
$('.navi > li').on("mouseover", function () {
$(this).removeClass('navi').addClass('navi2');
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
$(this).removeClass('navi2').addClass('navi');
});
When you hover a link the color will be red and when you mouseout the color will reset.
That way you can see how the script works!
I'm trying to create a grid that uses the following code to randomly apply an active "highlight" class to one of the child li elements
//add class "highlight" to random panel
var elements = $('ul#sliding_panels li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
Basically, the li element with the .highlight class will be 2x the size of the other panels.
The tricky part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.
I thought this code would do the trick but it's not returning anything when I hover .highlight (or doing anything else for that matter!)
EDIT: I've added the code to jsfiddle.net for people to see it live: http://jsfiddle.net/dxzqv/2/
<script>
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
$(".highlight").hover(
function(){$(this).animate({width: 400px, height:400px}, 1000);},
function(){$(this).animate({width: 200px, height:200px}, 1000);}
);
});
</script>
http://jsfiddle.net/dxzqv/3/
How's that?
Not sure if that is the effect you were going for, stuff is happening.
Going to fork and tweak some more.
//add class "highlight" to random panel
$(document).ready(function(){
var elements = $('ul#sliding_grid li');
$ (elements.get (
Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "400px", "height":"400px"}, 1000);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "200px", "height":"200px"}, 1000, function(){
$(this).removeClass('highlight');
});
});
});