Page 1 of 1

How do you make an inner div light up, but hovering outter?

Posted: Tue Jan 13, 2015 7:39 am
by simonmlewis
We have DIVs lined up.
Inside that DIV, is a second DIV. When someone hovers over the main DIV, I want the inner 'title' div to be using the ":hover" class and light up, but not necessarily when the mouse is over that particular DIV.

Re: How do you make an inner div light up, but hovering outt

Posted: Tue Jan 13, 2015 8:22 am
by Celauran
Do you mean something like this?
http://jsfiddle.net/7ozo0t7f/

If not, please post some markup and more detail about what you're trying to achieve.

Re: How do you make an inner div light up, but hovering outt

Posted: Tue Jan 13, 2015 8:31 am
by simonmlewis

Code: Select all

<style>
.home_promobox
{
height: 165px;
margin-top: 10px;
width: 300px;
border: 1px solid #cccccc;
float: left;
margin-right: 10px;
}

.home_promobox a
{
text-decoration: none;
}

.home_promobox_title
{
font-family: Titillium Web, Arial, verdana;
font-size: 18px;
background-color: #cccccc;
color: #000000;
padding: 5px;
text-decoration: none;
}

.home_promobox_title a
{
text-decoration: none;
color: #000000;
}

.home_promobox:hover  .homepromobox_title
{
background-color: #333333;
}

.home_promobox_image
{
width: 138px;
margin-right: 10px;
float: left;
}

.home_promobox_image img
{
width: 100%;
}
.home_promobox_freetext
{
padding: 5px;
text-decoration: none;
}

.home_promobox_freetext a
{
color: #000000;
text-decoration: none;
}
</style>

<div class='home_promobox'><a href='$row->url'>
<div class='home_promobox_title'>$row->content</div>
<div class='home_promobox_image'><img src='/images/pages/$row->image' border='0' /></div>
<div class='home_promobox_freetext'>$row->freetext</div>
<div class='home_promobox_freetext'>Take a Look</div>
</a>
</div>
This isn't doing it for the great 'Title' box.

Re: How do you make an inner div light up, but hovering outt

Posted: Tue Jan 13, 2015 8:33 am
by simonmlewis
Ignore that, I was missing an _ underscore. Thanks a lot.