I have written piece of javascript for close button, but when i hover my mouse to close button mouse icon is not changing to hand, so i am not able to close it, however hand appears at some points of the close button
I am facing this issue on firefox and chrome
IE is working fine
Below is some part of it
href="javascript:closeWin()"
keephref="javascript:closeWin()"
style="cursor: default;
Below is its css
element.style {
cursor: default;
}
The default is the normal arrow. Pointer is the hand.
style="cursor: pointer;
element.style {
cursor: pointer;
}
Add CSS cursor:pointer; which shows a pointing hand cursor.
If you are using <a> tag then dont add cursor:default; to it because an <a> tag already displays pointing cursor.
If you want to show hand cursor use this CSS for your close anchor
a.close {
cursor: default; /* modern browsers */
cursor: hand; /* old IE - property is ignored by others */
}
If the tag is a link, remove the style since the href will give the hand
Close
I do not know what you need the keephref for, but it is not recommended to use javascript: protocol for a link
As AlienArrays and Zword said, the default cursor means normal arrow cursor.
If you want the default browser behaviour over an element, use:
style="cursor: auto;"
You can also use the pointer value if you want to force "hand" style cursor, ie. to indicate that something that normally is not clickable will perform an action when clicked.
You can check :hover attribute in css
#element :hover
{
cursor:pointer;
}
Related
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
I would like to change the cursor property to imply that the user needs to double click.
Are there any additional icons besides the default one's that can be applied? I saw a list here:
W3Schools
But I need the cursor to look like a pointer with two fingers, or some other icon which is better representation for double click.
You can basically use any image you want.
Use cursor: url(your-image-path.png), auto;
div {
cursor: url(http://65.media.tumblr.com/avatar_91989eab746d_96.png), auto;
}
<div>
Winter is coming
</div>
Original fiddle: JSFiddle
For IE support you will need to use .cur format
I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.
Trying to change the background color when the hyperlink is clicked, but since there is an onclick event it appears that the click default behaviour is taken away so the active style does nothing. Would prefer to do this using CSS.
CSS:
a.myanchor.sunsetred a:active {
background-color: yellow;
}
HTML:
<p>
<a onclick="displayText("Hello world") return false;" href="#" class="myanchor sunsetred">Click to display text</a>
</p>
Any ideas that could help?
I can not see any difference with or without the onclick parameter. (In Chrome) Just to make sure, you know the active state is applied during the click. As soon as you release the mouse button, the state is released. Maybe you mean :focus instead.
Either way, I believe you have a syntax error in your style declaration. You are coloring active links inside other links, which doesn't make sense. You probably mean:
a.myanchor.sunsetred:active {
background-color: yellow;
}
Is it possible to change the color of the mouse pointer, so it matches the theme of your web site?
Not the color. You can create your own cursor image though, and apply it in css with the cursor property:
body {
cursor: url(myCursor.cur);
}
This page is relevant.
The "cursor" CSS property can be given the URL of an image to use:
.foo { cursor: url(whatever/cursor.cur) auto;
Different browsers have differing support for this; Opera has none I think.