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

【问题标题】：Confused with CSS: image button with hover tooltip and image changing when hover与 CSS 混淆：带有悬停工具提示的图像按钮和悬停时图像更改
【发布时间】：2013-07-29 15:06:04
【问题描述】：

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

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

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

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

【问题讨论】：

到目前为止你得到了什么？展示一些你目前拥有但不适合你的 CSS？

标签： html css

【解决方案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 框架。

【讨论】：

Jquery Tool-tip 将帮助解决它，只需按照示例：jqueryui.com/tooltip

【解决方案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;
}

【讨论】：

【解决方案3】：

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

EXAMPLE

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：