Here's my code
http://jsfiddle.net/6748w/
I would like that the imgs/fleche_bleue.png in my CSS to appear under the hovered menu. I can't figured it out.
Thanks
UPDATE
http://jsfiddle.net/6748w/20/
See the small arrow under the mouse over, that's what I want without the glitch it make !!
Try this: http://jsfiddle.net/NKRZG/
When you hovered over the link, the position moved. Since it moved out of range of the mouse, it moved back to it's original position. This kept repeating until the mouse was moved completely away. All I did was remove the top:30px.
(Also I added a background color since the image did not load just to show that it works.)
http://jsfiddle.net/6748w/18/
Related
I have a normal website with some pictures in it. When I hover over the pictures with the mouse it plays a short audio. Now I want to insert a big black dot as a foreground picture. And this dot will cover some pictures. Now with this I still want to use the hover function even if the pictures are being covered.(It should still detect if the picture is being hovered by the mouse even though they are covered). This should be simulating (in a way) visual impairment.
it looks like this and the dots size will change if I navigate to another page: https://imgur.com/U6X4dcp
How can I insert a (foreground) picture that covers the whole page?
How can I use the hover function even though the pictures are covered?
You have to make the foreground picture child of the element that is to be hovered:
#element:hover #foregroundpicture{
display:fixed;
width:100%;
top:0;
left:0
}
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
I have an HTML image of a mannequin. An image map defines body parts. I have two divs on top of the image map, one to show the hover selection and one to show the current (active part). The problem I have is: when a part is marked as 'active', I reposition the background on the 'active' layer to show a highlighted background image (a sprite map which uses a different colour. When the 'active' state i displayed, I can't click through it's transparent parts to select a different part.
One possible solution would be to use pointer-events, but I wanted to keep it as compatible as possible.
When i.e. a div has opacity:0; to make it transparent, it's still on top of other div's.
This way the div underneath won't be clickable.
This can be fixed by changing the display-mode of a div to hidden.
This way the div will be 'removed' and div's laying underneath will be clickable.
If you want to be able to click through transparent parts of an image, try using them as .PNG files.
-not sure if this might be helpful to you-
It's difficult to visualise the issue without being able to look at code or a diagram, but I've tried something in JSFiddle that may help.
In the example I've created, the 'hover' element starts off being unclickable where the 'active' element covers it (but is clickable where it is uncovered). After clicking the 'hover' element, its z-index property is altered so that it appears on top of the other elements. You can see it works because it is subsequently clickable everywhere.
Relevant jquery:
$( "#hover" ).css( "z-index", "2" );
I'm hoping this solution is helpful but, again, it's hard to tell if I've got the right idea without seeing a visual example of the original problem.
The idea behind this solution is you can rearrange the z-index values of elements upon clicks registering as many times as you need in order to make sure the relevant parts of the page are always clickable by the user.
My question is simple really;
http://minimalito.be/ltripple/
As you decrease screen size, the little menu at the top right disappears and a small icon appears. When you click it, another menu will unfold, but as it unfolds there is a small peace 'missing', just click it and you'll see what I mean.
And I have no idea why...I think it's a margin/padding issue, i've tried so many things, but can't seem to find it. It's one of the few problems before it's finished, so it's driving me crazy because I can't find it. I did notice that the 'gap' increases as the icon is further away from the right border.
Also, I didn't have this for a long time, i recently adjusted a bunch of things and then this suddenly happend.....:-(
Thnx in advance!
To fix it you will need to apply "clear:both" to "#proxyMenu".
#proxyMenu {
clear:both;
}
It appears to the the animation class firing on your #proxymenu when you open your menu.
See if you can remove the following style:
overflow: hidden
i have a question about html and css.
How can i make a sidebar like the one in Google FAQ page?
I mean, the sidebar that when you put the cursor over, an arrow appears and if you move the cursor, the arrow moves with it.
I hope you can help me, thanks!
From the looks of it, they are listening for an event (in this case when div#gd-collapsible is hovered over) and the class "hover" is added to it.
So you have that #gd-collapsible is about 3 pixels wide and and on hover, the class "hover" is added which has 1px border solid on left and right, and that's about it really.
You can do this via jQuery, just make sure you style the div#gd-collapsible in a way that it's height equals the one from the right side bar.