Search code examples
csshtmlrollover

How to make a clickable div with a rollover image-link inside of it?


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


Solution

  • 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