ok I think I unserstand, it's hard to give you exact code with out anything posted but use
#range-logo:hover a{
background-color: #FFF
//add whatever styles you want on that tag
}
EDIT
Just use an a
tag and add id="range-logo"
to it. a
's are inline-block
by nature so if you want it to behave like a div use display: block;
. Now you don't need that second a
tag inside, use a div
and add a class to it
<a class="left1" id="range-logo" href="/products">
<div class="left1button"> <div class="someName"></div></div>
</a>
EDIT 2
you have this script that's targeting an a
inside of .left1button
.left1button a {
display: block;
width: 158px;
height: 37px;
top: 175px;
left: 75px;
background-image: url(http://oi40.tinypic.com/2zfr7h4.jpg);
}
So you can do 1 of 2 things, you can use <div></div>
instead of <a href="#"></a>
and change the above target to be .left1button div
or you can remove that whole thing and use something like
.someName { //Call this whatever you want
display: block;
width: 158px;
height: 37px;
top: 175px;
left: 75px;
background-image: url(http://oi40.tinypic.com/2zfr7h4.jpg);
}
and then you can use my example above. Whatever you want