Is there a simple way to trigger a hover event on all overlapping elements? I'd love to be able to do it with just CSS.
Here is a little example: jsFiddle
Basically I have a few rows of divs which will move with the page when I scroll. Then a single overlapping div with it's position set to fixed. Both sets of divs have a CSS:hover event to change their background color so they get highlighted when I mouseover them.
My goal is to make it so that when I mouse over overlapping it turns red AND whatever sample text div that is behind it turns grey.
The only way I can think of to do this right now is with javascript. And it's inelegant. Basically get the mouse position on the overlapping div, and loop through all the sample text divs to check if their position is under the mouse.
Related
suppose I need to exchange the place of two image between two div without shifting div and also set blackened the background color of div. when images will change position there should be visible the background color !
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I am trying to get the NVD3 tooltip to go above all other divs. The problem is that I have three charts in a row, and very large tooltips that spill out of their div. I can set the z-index on one or the other side, but one will always be below another.
For example, if I set the center div to have the highest z-index, then the tooltip generated from the left or right side is cut off in the center area, and so on.
Changing the z-index of the tooltip doesn't have any effect, as it's ultimately a child of the respective chart. How can I make it stay above everything?
Easy fix was to add a CSS3 hover selector to the divs that increased the z-index.
On my site, I have a sticky navbar that is always positioned at the top of my site, so even as you scroll down, it's still visible.
It's also transparent, and just contains some black text.
The problem is that on my page, there are several divs with varying background colors. So as I scroll down the page, the text in the nav looks fine as I overlay divs with lighter backgrounds, but it's really hard to read on darker ones.
I figure I have two options:
Change the nav text color based on if I'm overlaying a div with class "dark"
Change the nav text color based on the background color of the div beneath it.
Are either of these possible? Or is there another option I'm not aware of?
I just read about Midnight.js, a jQuery plugin that allows you to use data-attributes on the elements you scroll over to define how your navigation should look. Might be worth to give it a look.
Check out jQuery Waypoints. It's perfect for your problem. You can specify exact waypoints so that the moment a differently colored div hits your menubar, an event is fired. and in that event you can change the menubar color. And then you'd have another waypoint at the bottom of that div so you could reset the color.
http://imakewebthings.com/jquery-waypoints/
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
CSS3 Transparency + Gradient
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).
The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.
If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)
Good luck!