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!
Related
I want to change margin of one tag when mouse is hovered on its parent.
mouseIsOver() method doesn't making any change.
function der(){
if($(".experience-div li").mouseIsOver()){
$(".star").css('margin-right','10px');
}
}
der();
I changed it to is() method, still nothing has changed.
>
function der(){
if($(".experience-div li").is(":hover")){
$(".star").css('margin-right','10px');
}
}
der();
There is no mouseIsOver function in jQuery or the DOM.
You can use jQuery's hover:
function der(){
$(".experience-div li").hover(
function() {
$(".star").css('margin-right','10px');
},
function() {
$(".star").css('margin-right','auto'); // Or whatever it should be when not hovered
}
);
}
der();
I wouldn't recommend manipulating the style directly like that, though, I'd use a class:
function der(){
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
With
.star.hovered {
margin-right: 10px;
}
Live Example:
function der() {
$(".experience-div li").hover(
function() {
$(".star").addClass('hovered');
},
function() {
$(".star").removeClass('hovered')
}
);
}
der();
.star.hovered {
margin-right: 10px;
color: red;
}
<div class="star">I'm the star</div>
<div class="experience-div">
<ul>
<li>Hover me</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To listen to events (such as mouseover) in jQuery you need to use the .on function:
$(".experience-div")
.on('mouseenter', 'li', function () {
$(".star").css('margin-right', '10px');
})
.on('mouseleave', 'li', function () {
$(".star").css('margin-right', '0');
});
You don't need to use JS to complete this. you simply need to add a :hover state to the class in question.
I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link
Tried jquery:
$('.dropdown-toggle').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
But it is not working...
In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into
.navbar .btn-group:hover > .dropdown-menu {
display: block;
}
it should work with your example code.
You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)
Try this
jQuery(function ($) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function () {
location.href = this.href;
});
});
I want to add a marker character to a link when the user clicks it, and remove it when he clicks it a second time.
Here's what I have :
$('#text a').click(function () {
$(this).addClass('clicked');
$(this).text(markerTextChar + $(this).text());
$(this).click(function () {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
});
});
The marker is added on click, but it is added one more time when I click it to deselect it.
Can you help me fix that ?
Adding a event handler with bind (or click) doesn't remove the old ones.
You could unbind it but this is not needed. Do this instead :
$('#text a').click(function () {
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
} else {
$(this).text(markerTextChar + $(this).text());
$(this).addClass('clicked');
}
});
demonstration
You might also use toggleClass and use :before in css to add your char, that would be much cleaner.
css :
.clicked:before {
content: "yourmarker";
}
javascript :
$('#text a').click(function () {
$(this).toggleClass('clicked');
});
demonstration
you have to unbind first click event do it like this
$('#text a').click(function () {
$(this).addClass('clicked');
$(this).text(markerTextChar + $(this).text());
$(this).removeAttr('onclick');
$(this).click(function () {
$(this).removeClass('clicked');
$(this).text($(this).text().substring(1));
});
});
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.
I'm further along in making this all work, but when I try to add some code that hides the others when one is clicked it expects a second click to hide again. How do I only show one menu at a time? PS These are not sibling menus.
$(function() {
$("a[rel=tooltip]").tooltip({ position:"bottom" });
$(".dd").toggle(function() {
$("ul", this).show();
$(this).addClass("on");
$("ul a", this).click(function(e) {
e.stopPropagation();
});
if $(".button1").click() {
$("#contextMenu2, #contextMenu3").hide();
};
if $(".button2").click() {
$("#contextMenu1, #contextMenu3").hide();
};
if $(".button3").click() {
$("#contextMenu1, #contextMenu2").hide();
};
},
function() { $("ul", this).hide(); $(this).removeClass('on'); }
);
});
I got this to work how I wanted it. Thanks to this thread jQuery Toggle State
$(".dd").click(function() {
$("ul", ".dd").not(this).hide();
$("ul", this).toggle();
});
$(".wrapper").click(function() {
$("ul", ".dd").hide();
});