I have this JS code.
I want to show a "hand" cursor when I hover on the div like it would normally do for an a href.
$("#button1div").click(function(){
window.location = 'http://google.com';
});
How do I make the cursor change to a hand?
Thanks.
While you seem to want to do this with Javascript, there is a much easier way to do it with CSS alone:
#button1div {
cursor: pointer;
}
And, I'm not sure if you're really doing anything more than changing window.location when that div is clicked, but it looks like you could use an a element with no problem.
$("#button1div").css('cursor','pointer');
will set the cursor as hand symbol.
Related
I am looking to change the background of one class of div's called "grid-light" when I hover over a link on the page. I feel my JS is correct but I am not getting the result I am looking for. Here is my code:
grid-light
JS
an element to hover over
class to change "grid-light" to
https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59
This link shows you what i think you're going for, you declare your variables,
on mouse over of your link1, it will change div1 items to red
on mouse out of your link1, it will change div1 back to black
Please let me know if i can clarify more!
It looks like you're trying to use the elements like jquery, and className is a React thing.
div1.className = "div1hovered";
Instead with javascript you can access the classList:
div1.classList.add("div1hovered");
Also recommended to do this with CSS:
div1:hover {
background-color: red;
}
I want to add Custom set of cursor on my website. I have added that cursor but while hover anything that cursor change I have the Set of Pointers including both .ani & .cur required for my site. I have already tried :
This is the JavaScript that I used !
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
My cursor:
bluecursor
I have its Set , but I dunno the code to set while cursor for crosshair ,help , wait etc.
cursorset
Is this possible?
All supported cursors can be enabled through CSS: http://www.w3schools.com/cssref/pr_class_cursor.asp
If you have to do this with javascript it seems as a bether idea to have a class in your css with the desired behaviour/style and then only set that class with javascript.
If you want to do this, it is better to do it in css:
For example, if you wanted to have the cursor change to your custom cursor only when hovering over an anchor tag then you can do this:
a {
cursor: url(cursor/bluecursor.cur), auto;
}
If you wanted to have the cursor ALWAYS use custom cursors, then you have to decide when to use a special cursor. You can do this with classes:
.help {
cursor: url(cursor/help.cur), auto;
}
Then apply that class to the particular element that you want to display the custom cursor:
<div class="help">Help Me</div>
There is no way (to my knowledge) to simply tell the browser just replace all cursors with a custom set.
This code worked for me (not JS but jQuery):
$("body").css('cursor', 'url(arrow_blue.cur) , auto');
$(".button").mouseover(function(){
$(this).css('cursor', 'url(arrow_blue.cur) , auto');
});
Don't forget to override if there is any specific items like buttons, etc... Just defining a cursor for body does not cover the elements under, if something special is defined for them. So you have to override, for mouseover etc...
I have 2 buttons in my div, left side and right side. When I click on right button it need to move to right and for left button it need to move to left. I used:
$('.left').click(function(e) {
$('#votersDetailsTable').animate({
'marginLeft': '30px'
});
});
can i use like
$('.left').click(function(e) {
$('#votersDetailsTable').live("animate",{
'marginLeft': '30px'
});
});
Here maindiv is also creating dynamically .I am unable to move the div.Please help me.Thanks in advance..
try to put the div's position to relative in your css file
#mainDiv{
position:relative;
}
We'll need to see more of your css and html that contain these buttons. However your issue is that you are animating the attribute left which will only do something if #mainDiv is positioned absolute (or fixed).
The attributes you can change inside jQuery.animate() are css attributes. So you'll probably want marginLeft.
Generally when I have to create elements dynamically and then animate them, I write out the html / css for the before and after and find differences in order to figure out what attributes to animate.
Put alert just before animate to check if control is coming into click function. If not
try using .on() instead of .live()
Working Demo
Refer to MDN Docs for left css property
left applies to only positioned element's
#mainDiv{
position:relative;
}
Is there any way to change mouse pointer icon using javascript(or any other method) when I hover it on a normal text on which I want it to appear like a hand as with links on a webpage.
See http://www.w3schools.com/cssref/pr_class_cursor.asp
Using css:
div { cursor:pointer; }
Look up the css attribute cursor.
It's the best way to do it.
You could use like:
onmouseover="this.style.cursor = 'hand';" //on mouse over
onmouseout="this.style.cursor = 'auto';" // on mouse out
On this page in Espn.com, if you go to the upper right corner and hover over "myESPN", an inline popup window (if that is what it can be called) appears (in such a way that it looks connected to the initial button) and allows the user to log in to the site.
In the html it looks like there is a hidden div that is made visible and is pushed to the front when the mouse goes over a certain element, and stays in view as long as the mouse remains on the calling element, or the newly shown element itself.
I am looking to do something similar. However, after poking around a bit with Firebug, I am unable to identify exactly how it is done. I assume that it involved javascript, and probably jquery as well - can anyone help with the specifics on implementation?
What you need is an absolutely-positioned div-element, which you position the way you want it to appear. Then you hide it with style="display: none;", and on mouseover of the right element, you show it. With jQuery that'd be:
HTML:
<div id="layer" style="display: none; position: absolute; top: 10px; left: 300px;">something</div>
Javascript:
$('#elementToHover').mouseover(function() {
clearTimeout(timeout);
$('#layer').show();
});
Edit:
To hide it:
var timeout;
$('#elementToHover').mouseout(function() {
timeout = setTimeout("hide()", 1000);
});
$('#layer').mouseover(function() {
clearTimeout(timeout);
});
$('#layer').mouseout(function() {
timeout = setTimeout("hide()", 1000);
});
function hide() {
$('#layer').hide();
}
or something similar...
A good tool to help you is the following Visual Event bookmarklet. It allows you to see all the events that are tied to elements on the page.
When run on a page an overlay is shown and little icons are placed next to the elements that have script events. You can hover the icons to see the actual js. Be warned if the developers have been good enough to minify the js then the script you see will not make too much sense.
(source: gyazo.com)