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.
How do you make an inner div light up, but hovering outter?
Moderator: General Moderators
-
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you make an inner div light up, but hovering outt
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.
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
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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
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.
All the best from the United Kingdom.