# Trouble containing text+image in rollover action

**URL:** <https://forum.kirupa.com/t/trouble-containing-text-image-in-rollover-action/291509>\
**Category:** web dev\
**Created:** [June 30, 2009, 7:12pm UTC](https://forum.kirupa.com/t/trouble-containing-text-image-in-rollover-action/291509 "2009-06-30T19:12:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![drnen101](https://avatars.discourse-cdn.com/v4/letter/d/5f8ce5/32.png) [@drnen101](https://forum.kirupa.com/u/drnen101)\
**Post date:** [June 30, 2009, 7:12pm UTC](https://forum.kirupa.com/t/trouble-containing-text-image-in-rollover-action/291509/1 "2009-06-30T19:12:33Z")

</div>

so i have a rollover button that consists of a large image with a line of text at the bottom of it. I want the text to change color no matter where the mouse rolls over on the button (text or image). I’m using div tags but that is keeping everything in a separate little package that arent connecting to eachother- here is my code.

div.fillslot\_01 {  
position:absolute;  
width:181px;  
height:146px;  
z-index:1;  
left:6px;  
top:186px;  
}

div.fillslot\_01 a.text {  
position:absolute;  
top:148px;  
left:2px;  
color:#FFFFFF;  
text-decoration:none;  
padding-left:4px;  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
margin:0;  
padding:0;  
font-weight: bold;  
width: 113px;  
}

div.fillslot\_01 a:hover {  
color:#4f4e4e;  
text-decoration: underline;  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
font-weight: bold;  
}

\<div class=“fillslot\_01”\>  
\<a href="#"\>\<img src=“this is the image.jpg” alt="#" width=“181” height=“163” border=“0”/\>\</a\>  
\<a class=“text” href="#"\>This is the copy\</a\>\</div\>

Any ideas?