如何制作一个带有翻转图像链接的可点击 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

好的，我想我不明白，如果没有发布任何内容，很难给你准确的代码，但使用

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

然后你可以使用我上面的例子。随心所欲