Question

我是完全CSS / HTML菜鸟。如果你帮助我，我将非常感激。

我需要修理我的按钮：

将激活字段（悬停）减少到按钮的实际大小（无阴影）
当我将光标悬停在按钮上时，如何摆脱第一张图像？

谢谢！

jsfiddle链接：

HTML：

<html>
    <body>
        <div>
<a id="button" href="http://mysite.com"</a>
            </div>
        </body>
    </html>

CSS：

div {
    width: 820px;
    height: 820px;
    background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}

#button{
  display: block;
    width: 204px;
    height: 116px;
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
    position: absolute;
    top: 90%;
    left:10%;
}
#button:hover {
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
    }

Answer 1

我只是在适当的位置添加了一个角支架，似乎已经解决了这两个问题。请参阅JSFiddle here。

<html>
    <body>
        <div>
            <a id="button" href="http://mysite.com"></a> <!--Notice extra corner bracket-->
        </div>
    </body>
</html>

按钮图像无法正常显示

1 个答案: