如何制作一个带有翻转图像链接的可点击div？

Question

我正在尝试制作一个可点击的div，在其中保存我的翻转图像链接。我已经在其中有翻转图像，但整个div没有变成可点击的链接。

html看起来像这样：

 <div class="left1" id="range-logo">
 <div class="left1button"> <a href="#"></a> </div>               
 </div>

我的翻转图片链接功能正常，但保存翻转图片链接的div没有变成链接。我希望整个事情都是一个链接/可点击。

通过这样做，我想要实现的是拥有一个带有背景图像的可点击div（＃range-logo赋予它背景）。我希望那个背景图像在悬停时改变。而且，在div中，我想要一个图像翻转链接。

我正在处理的网站可以在这里找到：

http://shopmoonfall.bigcartel.com/

我正在制作大滑块下面的第一个div（第一个带太阳镜的女孩）。

Answer 1

好吧我认为我是unserstand，很难给你确切的代码，但没有张贴但是使用

#range-logo:hover a{
    background-color: #FFF
    //add whatever styles you want on that tag
}

修改 只需使用a代码并向其添加id="range-logo"即可。 a本质上是inline-block所以如果您希望它的行为类似div使用display: block;。现在你不需要第二个a标记，使用div并为其添加一个类

<a class="left1" id="range-logo" href="/products">
    <div class="left1button"> <div class="someName"></div></div>             
</a>

编辑2

您的此脚本定位于a

内的.left1button

.left1button a {
   display: block;
   width: 158px;
   height: 37px;
   top: 175px;   
   left: 75px;
   background-image: url(http://oi40.tinypic.com/2zfr7h4.jpg);
}

所以你可以做两件事中的一件，你可以使用<div></div>代替<a href="#"></a>并将上面的目标更改为.left1button div，或者你可以删除整件事并使用像

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

然后您可以使用上面的示例。无论你想要什么