如何使可点击的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);
}

因此，您可以执行2件事中的1件事，可以使用<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);
}

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