html - 按钮图片显示不正确

标签 html css button hover

<分区>


关闭 7 年前

我完全是 CSS/HTML 菜鸟。 如果你能帮助我,我将不胜感激。

我需要修复我的按钮:

  • 将激活字段(悬停)减小到按钮的实际大小(无阴影)
  • 当我将光标悬停在按钮上时,如何去掉第一个图像遗留的内容?

谢谢!

jsfiddle 链接:

http://jsfiddle.net/cRqhT/125/

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

最佳答案

我只是在适当的地方添加了一个 Angular 括号,它似乎解决了这两个问题。参见 JSFiddle here .

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

关于html - 按钮图片显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15029258/

上一篇:javascript - 多个导航更新 Jquery

下一篇:javascript - CSS !important IE8 无法识别

相关文章:

python - Selenium:测试弹出窗口

javascript - Css 重置为小于 320px

android - 在代码中旋转一个按钮(或里面的文字)

Java 通过单击按钮打开一个新窗口

html - 背景图像在手机上放大显示

html - 使用 nav-pills 渲染 django 和 html

html - CSS DIV 使用百分比

javascript - 跟随鼠标移动和滚动的元素

css - 使用 javascript 来布局页面而不是 CSS

php - 如何通过 PHP 运行 SQL 更新查询?