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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post by simonmlewis »

Ignore that, I was missing an _ underscore. Thanks a lot.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply