In this jsfiddle
http://jsfiddle.net/vnKdu/7/
I made 3 boxes with info container, currently the effect works fine when you hover the info container and his height changes from 35px to 150px but I need to do same effect when hovering the parent not the actual element. Thank you!
Take a look at updated fiddle http://jsfiddle.net/vnKdu/9/
You should have set mouse events to parent element and morph child, just it.
Related
I have a dropdown menu that hides behind a div even though I've set for it a much higher z-index here's a screenshot.
Hidhing menu
By the amount of information I can collect after seeing that screenshot I can say it is either 1 of the following 2 problems:
1. The parent div of the div with class 'dropdown-menu' do not have "position: relative" property applied to it.
2. Two divs need to be sibling to each other to hide or show one of them behind the other using z-index (they can't have parent child relationship).
I have this fiddle : jsfiddle.net/kxmzqbtL/
How can I make that the elements above other elements dont move these under them.
#fiddle : when hovering first three childs, it moves 4th and 5th child to fix its hover /width/ effect. How can I make it overlay these elements insted of moving them? Or other way to make it looks better, like scale first element up instead of down.
Thanks.
Add to the .item:hover:
margin-bottom: -15%;
z-index: 1;
Negative margin will make items placed below go up instead of down (so in this case it will negate added height and items will stay in the same place).
Fiddle: http://jsfiddle.net/kxmzqbtL/2/
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.
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.
I have a 2-by-2 grid of images arranged using float property in CSS.
I want to show a small overlay on each image when i hover over it, by switching its opacity from 0 to 1 on hover. My code works great when i hover the images in the top row.
But when I hover over the lower-row images, the overlay activated is still the one from the top row.
I think its an issue with positioning.
My code is here : http://jsfiddle.net/zZXZX/27/
PS : please dont mind the minor faults with the design.
You are positioning your overlay in absolute, without specifying a relative parent.
http://jsfiddle.net/tomprogramming/zZXZX/28/
position:absolute positions your overlay with offsets relative to its first parent that is not position:static, or if none are found, the document root.
.movie{
display:block;
float:left;
position:relative;
}
You need to add position:relative to your .movie class. position:absolute looks for its closest parent item that is not static position.
Add position:relative to .movie.