Can I remove hover from all the elements using CSS or Javascript? I want to remove it on mobile but to have it on desktop. I tried using pointer-events: none but it's removing all the events and I want the click event to remain.
Is there a way to remove only the hover property?
You can target all elements and their hover state using css:
*:hover {
}
Removing hover from mobile seems pointless since users cant really hover over elements. If they click on an element it kind of acts like a hover and having a special color for hover is therefore good, because user can see he actually cliked the element.
Related
I am trying to implement an "drag to sort" function on this page. On the right side there are thumbnails which I want to be able to order. I thought to use jQuery's sortable in jQuery UI. But it seems to be a bit odd since my thumbnails are scaled through CSS and then it does not work correctly.
Now I have made something what is basically. When I have a mouse down event on a thumbnail, I clone it hide the original and put the cloned element where my mouse is. But now when I hover (while having the cloned element under my cursor) over another thumbnail the hover event is not fired for that thumbnail.
Is there another way to determine if my cursus is above a certain element in the DOM? E.g so I can detect that the cursor is above another thumbnail while dragging a thumbnail.
Well, that was fast. This CSS on the item which is dragged seems to do the trick.
pointer-events: none;
I´m developing a little Chrome extension to allow user see what they are typing. It's a simple semi-transparent floating div element. The problem that I have is that html elements under it don't receive click events because the div element is over them (> z-index).
My question is:
Is any way to make my div "transparent" for click events (and other type of events)?
An image:
Try the CSS rule 'pointer-events'.
pointer-events: none;
I'm trying to find a way to register a mouseover event on an element that is beneath another element. I have rows which, when moused over, make a new div appear and positions it on top of the hovered div.
Here's the page: http://www.brunobryan.com/dev/stephanebourgeois/index/
When you mouseover a row, an image appears on the right. I would like to register the mouseover event on the row even when the mouse hovers above the image.
You can permit the cursor to pass-through the image using pointer-events:
#index-hover {
pointer-events: none
}
Note, this isn't supported in all browsers. Better support if you use SVG.
This is not really possible, you have a couple of options for workarounds.
Either a) Register the hover event on a container that will contain both the row and the image.
or
b) Bind the same hover event on the image aswell.
i think the answer here is going to be that your <img> tag needs to be placed inside of the <tr> tag, and then absolutely positioned. you'll probably want to make the row relatively positioned so that you can use the row's position as context.
Hi guys I have put together a simple dropdown menu system that uses hoverIntent to display the submenu and also display a lightbox style 'lights out' dark background.
I've got the menu working, but I'd like to update it so if you move from one item to the next the dark background stays where it is rather than disappearing and reappearing.
I have created a jsFiddle so you can see what I'm talking about:
http://jsfiddle.net/gGd6Y/10/
Try hovering over menu item 1 then moving to item 2.
I would like to be able to see the element the mouse cursor has moved to in the .mouseleave() part of the call to HoverIntent, then if it's another menu item I would prevent the dark background from being switched off.
With the way the HTML is currently setup it can't be done. The shadow covers the other hoverable elements. So when you mouseleave you are hovering over the shadow not the other LIs.
My proposed solution: http://jsfiddle.net/iambriansreed/k98LP/
I made the menu appear above the shadow. I delayed the shadow fade out action and made sure no other menu item was hovered before actually fading out.
See if this helps: http://jsfiddle.net/gGd6Y/11/
I've changed the menu items to stay on top of the overlay.
Edit:
Solution proposed in my last comment:
http://jsfiddle.net/gGd6Y/16/
Simple solution is to add mouseleave listener to container of all items.
More flexible solution is to store boolean values is_element_hovered for each element. When mouseleave event happens, set small delay and after that delay check your boolean values and set background animation properly.
I've build a drag and drop interface using JavaScript where users can click and drag a link (that sometimes has a CSS background image) and drop it onto the canvas.
My problem is that the mouse cursor has the link background image beneath it during dragging. I need to add my own cursor design, so is there any way to turn this CSS background off so that it doesn't follow the mouse upon dragging?
have you tried setting :active pseudo class for anchor tags?
http://www.w3schools.com/cssref/sel_active.asp
then if that isn't work quite yet you could use !important after your deceleration possibly?
and example could be
.links:active {
background-image: none !important;
}
when the user releases the background image should return.
The best solution I found for this problem was to use jQuery to assign e.preventDefault() to the click event of the link, thus disabling the background drag effect. Then, if you want a custom cursor upon dragging, write a script to match an absolutely positioned div's (with the image as the background) x,y cords to the mouse position.