I have an element following my cursor and I'm wondering if there's a way to trigger the css onhover event or add a class when the cursor element goes on top of my buttons.
You'd need to disable the pointer events on the element that's blocking the pass-through of your cursor.
Try this (CSS):
pointer-events: none;
Related
I have a parent element and its child element.
Currently the child is hidden and appears when you hover over the parent and disappears when you're no longer hovering over the parent, using css.
I need it so that the child element doesn't disappear when you move outside the parent element IF the mouse button is held down.
So I need to disable the hover if the mouse button is held down and then re-enable it on mouseup.
This is for a draggable element that needs its child element, the handle, visible when mousedown.
I need to do it without jquery and other libraries.
EDIT: woops... didn't see the "without jquery" part... my bad, left my jquery answer just in case and added a Without JQuery answer lower down
You can add a specific class that enables the hover css like this:
.parentElement.hoverCSS:hover {
.childElement {
display: none;
}
}
And then using jQuery you do this:
$(".parentElement")
.on("mousedown", function() {
$(".parentElement").removeClass("hoverCSS");
})
.on("mouseup", function() {
$(".parentElement").addClass("hoverCSS");
})
This adds an event on mousedown which removes the class hoverCSS which will remove the css that hides the child. The second event on mouseup re-adds the class which will re-enable the hiding of the child element on hover of the parent
WITHOUT JQUERY
Another way to do this WITHOUT jQuery or any kind of javascript for that matter (kind of a hack but it will work) is to change your parent element to a button and use the :active CSS like this:
.parentElement.hoverCSS:hover {
.childElement {
display: none;
}
}
.parentElement.hoverCSS:hover:active {
.childElement {
display: block;
}
}
Since the button is active when the mouse is being held down, this will display the child element
I've been dabbling in simple CSS transitions and hover events etc recently. I notice that when you press the TAB key it generally finds links which is fine but...
If I have a hover event, like a piece of text is revealed or something similar, how can I ensure that pressing the TAB key will trigger hover and or focus events?
This is because I have a page full of squares made up of DIVs that look similar to this:
When you hover over this block with your mouse it changes color via a hover event, essentially to visually inform the user that the element is in some way interactive.
Is there a way I could trigger the hover event with the TAB key or even the arrow keys? My reasoning is because if for some reason you did not have a mouse or touch device you could potentially miss out on content.
Amending my question slightly
So the TAB key is treated as a :focus event and works well when you give a link a :hover state but is it possible for the TAB key to acknowledge DIV elements?
With CSS you can use also :focus, try this:
div {
float:left;
margin:2px;
}
a {
display:block;
height:100px;
width:100px;
line-height:100px;
text-align:center;
background:purple;
color:white;
transition:.3s linear;
}
a:hover, a:focus {
background:orange;
}
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
This is with respect to your last comment:
So the TAB key is treated as a :focus event and works well when you give a link a :hover state but is it possible for the TAB key to acknowledge DIV elements?
I believe you are looking for tabindex="0". Adding that attribute will make your element capable of receiving focus.
So <div tabindex="0">Hello World</div>
The tabindex doesn't have to be 0. It can be negative, 0, or a possitive integer following these rules:
From MDN on tabindex
a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by
the platform convention;
a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the
value of the attribute: the sequential follow the increasing number of
the tabindex. If several elements share the same tabindex, their
relative order follows their relative position in the document.
In IE11 blur event not fired while mouse down on DIV element which has unselectable='on' attribute. In other browsers blur event is fired while mouse down on this DIV element
Without unselectable attribute blur event fires on mouse down on this DIV.
I need unselectable attribute with blur event while mouse down on this DIV, how to achieve this?
Please find code snippet below
function blurEvent() {
alert("event fired");
}
<input type="text" id="hello" onblur="blurEvent()"/>
<div style="width:300px;height:300px;background:#0ff" unselectable="on">
dasdasdsa
</div>
Firefox and Webkit support this feature through the proprietary -moz-user-select and -webkit-user-select properties respectively. Internet Explorer, however supports an 'unselectable' attribute on elements. When set to the value "on", text inside the element cannot be selected.
So basically instead of putting the attribute unselectable to on in the div, this can be easily done with CSS. Make a class (say unselect) and put the user-select option to none and then give the div the same class.
CSS:
.unselect
{
-moz-user-select: none; /* For firefox */
-webkit-user-select: none; /* for chrome */
-ms-user-select: none; /* for IE10+ */
}
Then provide the div with this class 'unselect'
<input type="text" id="hello"/>
<div style="width:300px;height:300px;background:#0ff" class='unselect'>
dasdasdsa
</div>
In this way, this will work in Firefox/Chrome/IE10+ browsers. The text inside the div will be unselectable and your onBlur event will also get fired. Here is a Working JSFiddle for your reference.
I'm total noob with CSS and it looks like hell =/
I have absolute positioned DIV and I handle mouse events over this DIV with JS like this:
<div style='position: absolute; left: 0px; width:50px; height: 50px;'
onmouseover='this.style.border="2px solid red"'
onmouseout='this.style.border="1px solid black"'>
</div>
<div style='position: absolute;'>SOME TEXT</div>
I need to place some text over this DIV and over the few same DIVs, but if I place any element over this DIV onMouseOut event is firing when mouse cursor switch to text. Tag with text can't be inside the DIV. Playing with z-index didn`t help. My browser is IE8.
UPDATE:
I can't place text into the div because text must go beyond bounds of DIV. In other words I want handle mouse events over arbitrary area in any text. I can do this if I set backgroundColor of DIV, but I need handle events of transparent area.
tried {cursor: pointer} on the text div?
If you're trying to do this purely with mouseover events, then the only way to achieve what you're after is to place the second div inside of the first.
On the other hand, if you want to dive into some scripting, here's a basic algorithm for how you can handle this:
Set up a function to fire when you mouseover the trigger divs. This function will show the "SOME TEXT" div, if its display is set to "none".
Set up a function to fire when you mouseout of the trigger divs. This function will be a little more complex. First you have to check to see what the event.currentTarget is; if event.currentTarget is the "SOME TEXT" div, return false. If it's anything else, then you set the display of "SOME TEXT" to "none".
This might be a little beyond where you are with CSS and JS, but it's pretty much the only way to get it done, since CSS alone won't do what you need.
For anchor links i want to removes the dotted focus outlines for mouse events, but want to display them when for keyboard tabbed navigation.? Is there any javascript, jquery method?
Method should be compatible all A-grade browsers. including IE6.
Although all pure css methods to remove dotted lines do not works in IE 6.
But remember i want to remove dotted focus outlines only for mouse events, but want to display them when user use keyboard tabbed navigation.
Try to use jQuery/Javascript to apply style when mouseover. That way outline:none; will must likely to apply when it's a mouse click.
CSS:
.foo.bar:focus {
outline: none;
}
jQuery:
$(document).ready(function()
{
$(".foo").mouseover(function(){
$(this).toggleClass("bar");
}).mouseout(function(){
$(this).toggleClass("bar");
});
});
Unfortunately, this brings another problem: IE6 compaitability with multiple classes. This can be solved by using double div techniques to apply style with multiple classes.
While I understand the OP wanted to handle IE6 as well, I've posted this solution for anyone is not concerned with IE6 and who wants to allow keyboard navigation (focus rectangles still appear when tab is pressed) but hide the focus rectangle when the element is clicked (or enter key is pressed).
The .hide-focus-on-click is just a jQuery selector - replace it with whatever selector you need (e.g. "div#nav a" for all hyperlinks within )
CSS:
.no-focus-rectangle {
outline: none;
}
jQuery:
$(document).ready(function() {
$(".hide-focus-on-click").click(function(){
$(this).addClass("no-focus-rectangle");
}).blur(function(){
$(this).removeClass("no-focus-rectangle");
});
});