Only using CSS2 i want to change background color of parent on mouse over of its child element can any body help me out. "I'am using div as parent and span as child on mouse over of child span i want to make parent div background color change"
well.... not really but you can make it look like. selectors always go the direction from parent to child. but you can try something using position: absolute of a background-simulating element inside the child element
http://jsfiddle.net/Kq4JJ/
edit note: this highly depends on the rest of your css! no element between the parent that should have the background and the hovering child (including itself) must have position, no matter if relative or absolute. otherwise the background will only cover that element.
Related
I'm trying to use overflow:hidden on a div element so that when I resize it the text it contains doesn't overlap other elements, but when I do it my :after element dissapears too.
Here's a couple images:
That happens because the pseudo-element is positioned outside the left edge of the div element, not inside.
See if you can move the pseudo-element to a different element (preferably a parent) where it won't be affected by the overflow setting on your div. If no suitable element exists, you may have to add a wrapper to the div and put the pseudo-element there.
I am trying to show a hidden Div on click event using JS. This Div contains UL which sometimes happens to be of height more than the parent Div. In such cases, parent Div scroll appears.
What I want is to show this list inside a child Div, on top of parent Div. This way the height of list will not affect the UI of page.
Here's the image of what's happening :
Note: Blue border represents the parent Div & list with grey background is inside a child Div.
And I have already tried applying position:relative;z-index:9999;
Make sure to give the parent a zindex (lower) too. See Z-index does not work in ie fir more ideas.
Sorry for such a "dummy" question but I really couldn't find a solution.
I have illustrated the situation graphically:
Inside the container, there are TWO siblings (RED <div>and BLUE <div>). Both have position: absolute;
RED has z-index:1;
BLUE has z-index:2;
RED's child (GREEN) has position:relative; and z-index:99;
I want to make GREEN to be upper than BLUE
Thank you!
UPDATE 1. Here is the fiddle
http://jsfiddle.net/yn9z7/
The key to solve that is in the article linked by sudhAnsu63 :
New stacking contexts can be formed on an element in one of three ways:
When an element is the root element of a document (the element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
But the interpretation is just the opposite. To set the blue element between the red and the green, the red one can not generate a stacking context. It is generating an stacking context because of the second rule; it has position absolute an z-index different from auto.
So, the solution is:
#red{
z-index:auto;
}
demo
This won't work since Red's z-index is lower than blue. z-index only works with elements with a common root element.
Check out the Stacking Contexts part in this article
Here the Blue div and the Red div is the direct child of container div. z-Index will not work exactly.
try changing the opacity of blue div to 0.99;
.bluediv {
opacity: .99;
}
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
yeah, this is not possible because child elements inherit the z-index of the parent. so it does not make sense to give the green div a z-index of 99 because it's z-index is only valid inside the parent (red div).
So if you give a container a certain z-index lets say 20, the z-indexing inside this container starts again from 0. this is a good thing because otherwise we had to give all children a z-index of minimal 21 or they won't be visible.
the first container on a web page is the body tag, you can stack all its children with the z-index property starting from layer 0 (z-index 0). just like the body tag every child has its own z-index "system" unrelated to higher elements in the DOM. so the z-indexing starts over from 0 inside a parent container with its own defined z-index.
I was wondering if there's any way to make a child more transparent than it's parent. I need to make a div show through more than the div it's contained in, any way to achieve this with CSS?
This is what I'm aiming for: I have a background with 0.6 opacity, the element on the left has 0.8, so it's darker, but I need the one on the right to be more transparent. Setting less alpha to it than the parent doesn't work, it just matches its parent.
It can't be done using CSS 2, but can be done using CSS 3 http://www.css3.info/introduction-opacity-rgba/
If you used rgba for backgournd-color for the parent, inside elements will not get opacity.
If you don't want to use css3, you have no way except putting the child outside the parent and play with positions.
Depending on what your situation is, you could try any of the following:
Give the child position:absolute and use CSS to move it to the location you want in front of the parent div.
Convert either the child or the parent into an image, then use opacity on the other as necessary.
Use CSS 3: http://www.css3.info/preview/opacity/
Compatibility of the CSS 3 technique in various browsers: http://caniuse.com/css-opacity
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).