Div inside another div css?

Question

I have 2 divs inside a parent div..i need the parent div to get bright on hover .. Here is the fiddle.. i tried using hover, but couldnt get it...any help please

http://jsfiddle.net/d9yPK/

html:

  <div class="parent" style="border:1px solid black;">
    <div class="one">
      <img class="img1" src="http://static.howstuffworks.com/gif/vincent- van-gogh-paintings-from-saint-remy-2.jpg"/>
    </div>
     <div class="two">
        <img class="img2" src="http://static.howstuffworks.com/gif/vincent-van-gogh-paintings-from-saint-remy-2.jpg"/>
     </div>
  </div>

Currently there is no css selector for parents: `http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector` you might need to use js — Igl3, Nov 21 '13 at 07:35
i have this whole parent div in another div...what if i need to put position relative to the parent ? does that work — user3016311, Nov 21 '13 at 07:41

score 1 · Answer 1 · answered Nov 21 '13 at 07:44

1

First of all you have this in your CSS .parent hover. But it needs a : in between instead of a space, like so: .parent:hover.

Also remove the style attribute from the parent div. Just define a border in your CSS.

Now you should be able to use hover from your parent class: http://jsfiddle.net/d9yPK/4/

answered Nov 21 '13 at 07:44

w00

26,172
30
101
147

but..i have that parent div inside another div..i have position relative to the upper div..if i put relative this parent div is not visible.. – user3016311 Nov 21 '13 at 07:49
This is because you only define the `border-color`. Without the inline style, you should define the type and width of the border in css. Just do `border: 1px solid blue;` on hover. [jsFiddle](http://jsfiddle.net/d9yPK/7/) – nkmol Nov 21 '13 at 07:52

score 1 · Answer 2 · answered Nov 21 '13 at 07:44

Move the inline style to the stylesheet:

<div class="parent"> <!-- remove style="border:1px solid black" -->

And change the CSS to:

.parent {
    position:relative;
    height:50px;
    width:200px;
    border:1px solid black;
}
.parent:hover { /* you forgot the : here */
    border-color:blue;
}

updated Fiddle

Div inside another div css?

2 Answers2