html - 与 CSS 混淆：带有悬停工具提示的图像按钮和悬停时图像更改

Question

我了解 CSS.In 片段的基础知识。

我试图了解如何将所有我想要的东西结合在一起。我想创建两种类型的按钮，“查看”和“保存”。我有 4 张图片，每张两张，一张代表按钮，一张代表鼠标悬停。所以我想要悬停时的替代背景。

我还想要一个工具提示，像“查看文件”、“保存文件”这样的“便宜”的东西，如果不够清晰，它可以更好地解释图像的内容。

我知道我需要使用悬停属性、背景属性，并以某种方式创建工具提示。这两个按钮实际上是带有链接的图像我如何将它们组合在一起？

Answer 1

你可以这样做：

<div title="View File" class="view-button">
    View File
</div>

CSS：

.view-button {
    background-image: url("first-view-image");
}

.view-button:hover {
    background-image: url("second-view-image");
}

保存按钮也是如此。该title标签显示一个小工具提示。如果你想要更大/更高级的工具提示，你必须使用一些 JavaScript 框架。

Answer 2

看一下这个

HTML

<button>Hello</button>

CSS

button {
    background: url(your-image.png) no-repeat;
}

button:hover {
    background: url(your-image-hovered.png) no-repeat;
}

button:focus {
    background: url(your-image-focused.png) no-repeat;
}

Answer 3

这是我的示例，将背景值更改为您的图像，使用工具提示我使用 jqueryui 示例

html

<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>

css

.button{
  background : #999;
  padding : 5px 10px;
  border-radius : 5px;
  color:#fff;
  text-decoration : none;
}
.savebutton{
  background : blue;
}
.cancelbutton{
  background : orange;
}

.savebutton:hover{
  background : cyan;
}
.cancelbutton:hover{
  background : yellow;
}
.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
  border-width: 2px;
}

JS

$('.button').tooltip();

Answer 4

嗨，我为你创建了一个小提琴。当您将鼠标悬停在图像/按钮更改时，您还会看到一个小工具提示，上面写着“单击此处保存”。这就是你所需要的吗？告诉我这是否对您有所帮助或您有任何疑问。

例子

HTML

<a href="#" class="save" title="Click here to Save"></a>

CSS

            .save {
             margin-bottom: 10px;
             width: 47px;
             height:20px;
             display:block;
             background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
            }

            .save:hover {
               background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
            }