如何使可点击的div内具有鼠标悬停图像链接？

Question

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).

Answer 1

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