CODEWITHSUNDEEP
csshtmlhoveronmouseover
Predz
Predz

Reputation: 201

changing background colour of a two divs at once

So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.

So i guess my question is, is there a way to make both child divs change when hovering one using css?

I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.

What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)

Thanks in advance

CSS

#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}

#parent :hover {
background-color: #0000ff;
}

#child1 {
width:120px;
float:left;
}

child2 {
width:188px;
float:right;
}

HTML (with some other stuff)

<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
    <div id="parent">
        <div id="child1">
            <img src="img.jpg">
        </div>
        <div id="child2">
            ${item.getinfo2()} <br>
            ${item.getinfo3()} <br>                      
        </div>
    </div>
</a>
</c:forEach>

Code is something like that. Ive been hacking it up for the last while but that was something like what i had before

Upvotes: 0

Views: 2618

Answers (4)

Brandan
Brandan

Reputation: 14983

I think you might just need to fix a line of your CSS. Change:

#parent :hover {
  background-color: #0000ff;
}

to:

#parent:hover {
  background-color: #0000ff;
}

That seemed to work for me.

Upvotes: 0

Rahul
Rahul

Reputation: 1876

Try this http://jsfiddle.net/rsarika/rtGw5/1/

Upvotes: 0

nolt2232
nolt2232

Reputation: 2644

Have you tried using jQuery? You could do something like this:

http://jsfiddle.net/UtdYY/

Html:

<div class='color'>
  <div class='color child'>test123</div>
  <div class='color child'>test456</div> 
</div>

Javascript:

$('.color').hover(function(){ $(this).toggleClass('red'); });

CSS:

.red { color:red; }
.child {height: 50px; }
​

Edit: Cleaned up the javascript, thanks elclanrs

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

If the one you're able to hover over is the first, you only need CSS:

.mavehoverable > div:hover, .makehoverable > div:hover + div {
    background-color: red;
}

With this HTML:

<div class="makehoverable">
    <div>Child 1</div>
    <div>Child 2</div>
</div>

Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.

Upvotes: 2

Related Questions