I'm trying to make a clickable div hold my rollover image link inside of it. I already have the rollover image inside of it, but the whole div isn't turning into a clickable link.
The html looks like this:
<div class="left1" id="range-logo">
<div class="left1button"> <a href="#"></a> </div>
</div>
My rollover image link is functioning, but the div that's holding that rollover image link isn't turning into a link. I want the whole thing to be a link/clickable.
What I'm trying to achieve by doing this, is having a clickable div with a background image (#range-logo is giving it the background). I want that background image to change when hovered over. And also, inside of that div, I want an image rollover link.
Site I'm working on can be found here:
http://shopmoonfall.bigcartel.com/
I'm working on the first div underneath the big slider (first girl with sunglasses).
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