Question

我理解CSS的基础知识。片段。

我试着理解如何将我想要的所有东西组合在一起。我想创建两种类型的按钮，“ view ”和“ save ”。我有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

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

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

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

JS

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

混淆CSS：图像按钮，悬停工具提示和悬停时图像更改

4 个答案: