CSS Elements (DIV) hiding and floating

Question

How can I hide a table element which is above a div element when the div element is hovered (mouse over)

CSS only**

Thanks in advance

Simple answer; You can't. There is no parent selector in CSS. You need JavaScript to achieve this — Turnip, Apr 21 '13 at 23:30
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Appleshell, Apr 21 '13 at 23:31
You could, however, extend the size of the hovered element and therefore overlap (thus "hide") the element above it. — Appleshell, Apr 21 '13 at 23:33
I currently tried to this div { width:298px; height: 62px; position:relative; } div:hover{ height:90px; } but this doesn't overlap the element above it just hovers downward increasing the height from 62 to 90. — Bob Sanders, Apr 21 '13 at 23:41
Try creating a jsfiddle.net demo so we can see what you are actually doing. Right now, we are all guessing. — Marc Audet, Apr 22 '13 at 01:08
here is the fiddle [fiddle](http://jsfiddle.net/BradleyCallender/PTbPw/) i want the red element to hide (or overlap) the two squares above it on hover. — Bob Sanders, Apr 22 '13 at 02:22

score 1 · Answer 1 · answered Apr 22 '13 at 06:02

1

I edited your fiddle to work like you asked: Fiddle. (Note the class "overlap")

<div class="overlap" style="">
test
</div>

CSS:

.overlap {
    background-color:red; top:-65px; margin:2px; display:block;
}
.overlap:hover{
    top:-160px;
    padding-top:95px;
}

answered Apr 22 '13 at 06:02

Appleshell

This is exactly what I need, can It be done without a class or id? – Bob Sanders Apr 22 '13 at 12:49
Why would you do something like that without a class? – Appleshell Apr 22 '13 at 13:01
learning/teaching purposes – Bob Sanders Apr 22 '13 at 13:09
CSS3: `table + div {background-color:red; top:-65px; margin:2px; display:block;}` `table + div:hover{top:-160px; padding-top:95px;}` `+` basically means `after`, so this should work here too – Appleshell Apr 22 '13 at 14:04
can you throw it in fiddle? – Bob Sanders Apr 22 '13 at 14:16
I think this should have been enough information, especially when this is for learning purposes. Fiddling around a little on this shouldn't be so hard. – Appleshell Apr 22 '13 at 17:09

1 Answers1