I'm creating a website, where I put a menubar on top of a background image.
The menubar is build as <nav><div><ul><li>[<ul>]</li></div></nav>.
The div element owns a background. li-tags own a background depending on selection and hover.
When hovering over a menu item, I actually want it to be transparent, so that you can see the background image through the parent-tags. However the div needs a background for having a bar.
Is there a possibility to build a kind of tunnel through the parents to a specific z-index or to set only the corresponding background of the parent transparent? Something like backgroundZ: -5
Related
The site I'm building is https://new.usedmercedesbenz-sales.co.uk
I have a div with a slideshow inside it at the top of the homepage.
I've set the div (.slider-wrapper) to have a background image, this is an PNG image that I'd like overlayed on the slider to give it a rounded bottom effect.
I've also set the div to z-index of 100 and the z-index of the slider to -100, however, the overlay image is appearing behind the slider despite setting z index (I can see it breifly as the page loads).
How do I set the background of the div to be in front of the image slider?
create another div and place it right above the div using absolute positioning relative to the div which has the image or you should give z-index to the img tag itself
I have a drop down menu created with CSS. The menu is in Dropdown Menu. The problem is that when I try to access the child element , they are not coming properly. I have given some margin between the parent and the child elements,and when the mouse cursor points to that gap, the drop down menu hides. Is there any way I can maintain a margin and still able to see the child list,like in jquery.
As Morpheus suggested, set the padding on the container div. To get the margin effect, move the background style to the child div.
Hey I wanna do a pure CSS3 dropdown navigation. If you hover the first item it changes the background and opens the dropdown child element. This is okay. But if I hover the dropdown element the changed background resets like its not hovered.
How can I change the style of an element forced by the hover of an other element?
If you really want to stick to pure CSS3 you could put both objects into a container and define the color in this container. Overwrite it in the dropdown child if necessary.
here's a quick CSS only dropdown. the trick to preserve the background is to set the hover style to the main menu item, and not to the submenu item. events like hover, like JS, bubble up. hovering a child will also mean hovering the parent.
What I'm trying to do is fairly complex.
The basic idea is that I have a wrapper div, say 20 x 20 px, that is hidden and fades in once I hover the mouse over it and fades back out when the mouse is removed. I have this part figured out.
My next step was to include a div containing an image inside the wrapper div. The image div which is bigger (about 300 x 400px), overflows the boundaries of the wrapper div so that the entire image is visible and, as a child of the wrapper div, also fades in upon hover.
This brings me to my issue(s):
1. When I hover over the area, the image fades in like I want it to, but the top right corner is bound by the wrapper border, and it overflows to the bottom left only.
2. When I hover over any area the image covers and not just the wrapper area, the image will appear.
desired result for issue 1: I want to position the image div within the wrapper so that it overflows up and left, as well as down and right. In other words when I hover over the wrapper area, I want the image to fade in completely eclipsing the wrapper area so that the wrapper area is basically centered within the image area
Desired result for issue 2: I ONLY want the fade in effect to be activated when I hover over the 20 x 20 wrapper area. When I hover over any area the 300 x 400 image WOULD cover when visible I don't want anything to happen. On mouse off It wouldn't matter to me if I had to leave the area of the image or the area of the wrapper for the fade out to begin, but if it's possible to limit all hover activation/deactivation to the 20 x 20 area only, that would be cool.
I could so easily use the old image1 over image2; on hover, image 1 fades out to reveal image 2 trick, but it's all hell since I want the fade activation location to be within the area being faded itself.
Isk
UPDATE:
I have figured out issue number 1.
so now I just need to figure out my second problem and I'll be all set.
To get a visual of my progress so far, here's my website: http://silentnoizemusic.com
Scroll down to the area with the billboard that reads "SALES#silentnoizemusic.com" and hover the mouse over the black twitter icon to the upper left of the billboard.
Just as a reminder, I want the fade in action to take place ONLY when I hover the mouse over the twitter Icon area and not when I hover over the area the fading image covers. The image is placed within a smaller div wrapper set to visible overflow. So if you were to set the overflow to hidden you'd see that there is a square area with a yellow border that fades in when you hover over the twitter Icon. When I set the wrapper back to overflow: visible;, I only want that square area to activate the hover function and not any of the area around the square that the invisible overflowing content occupies.
It would be preferable if there was non-javascript solution due to coding restrictions, but if js is the only option then I'll give it a try anyway.
Thanks again,
Isk
This problem is occurring because your image is a child of the wrapper div and hovering over it is considered as hovering over the wrapper div.
If you are not terribly against a Javascript solution, here's my suggestion:
Take the bigger image outside the small wrapper div, i.e. it's no longer a child. But position the wrapper and this image in the same places as before. Then, on an onmouseover event on the smaller div, change the visibility of the image as before. On an onmouseout event, hide the bigger image again.
In order to change the properties of an element in response to actions on some other element you would need Javascript and CSS won't do.
This is the HTML and JS. Put the whole thing in your HTML file:
<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>
<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>
I'm setting up a design that uses some gradients, and of course that causes issues. What I want is for my one background image with the vertical gradient to be the main background, but then if the content extends and pushes the div out, I want a different sliver image to repeat on the bottom. Is it possible to do something like this?
The closest you can get is using a background color with your background image. Then set the image to non repeating. Then the color will be the background for the parts of the div where the backgound image is not.