1

我正在尝试使按钮看起来像我想要的那样。我设法做到了，但问题是要求我使用javascript 发布表单，这完全破坏了该网站的可访问性。

所以，我想知道如何在所有按钮上<input type"submit" />保持鼠标悬停效果的同时使用获得相同的效果，而不仅仅是文本（我的第一个解决方案有这个问题）。

这是按钮的外观（您还可以看到鼠标悬停效果）：

具有鼠标悬停效果的按钮样式

在这里你可以找到一个小提琴：http: //jsfiddle.net/FireDragonDoL/hjC7P/

这是代码：

HTML

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="nothing">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
    <div class="container">
      <div class="button"><span><span>Leggi tutto</span></span></div><br /><br />
    </div>
  </body>
</html>

CSS

* {
    outline:none;
    border:0;
}
body {
    margin:0;
    font-family:Georgia, "Times New Roman", Times, serif;
}
a {
    color:#750e0e;
    text-decoration:none;
}
a.reverse-color {
    color: #D6D6B0;
    text-decoration: none;
}
.container .button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.container .button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.button {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 1px 0 transparent;
    border: 0 none;
    cursor: pointer;
    height: 60px;
    margin: 0;
    overflow: visible;
    padding: 0 0 0 15px;
    width: auto;
    float:right
}
.button span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_rosso.png") no-repeat scroll 100% 0 transparent;
    color: #750E0E;
    float: left;
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    text-align: center;
    text-shadow: 0 1px #D7E9A4 !important;
    white-space: nowrap;
    text-shadow:1px 1px #FFFFFF;
}
.button:hover span {
    color:#333;
}
.button span span {
    line-height: 52px;
    padding: 0 20px 0 0;
}
.button:hover {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 1px 0 transparent;
}
.button:hover span {
    background: url("https://dl.dropbox.com/u/762638/Stackoverflow/ButtonStyled/bkg_btn_hover.png") no-repeat scroll 100% 0 transparent;
}
.container, .nothing {
  clear: both;
    overflow:hidden;
    padding:10px 0;
}

我唯一的想法实际上是使用按钮背景的大图像（可能更宽）和 use <input type="image" />，但在这种情况下，我不知道如何在图像上放置文本。

任何建议表示赞赏

4

2 回答 2

0

这是可能的，但不同的浏览器会出现问题。简单的方法是在图像中包含您的文本。并使用精灵技术来实现悬停效果。

于 2013-01-07T07:24:53.393 回答
0

目前，没有办法通过单个 html 元素来做到这一点。也许 with :beforeand:after可以做一些事情，或者 with position: relativetoo。

目前，我将坚持使用 javascript 代码将这些项目转换为“提交”按钮。

于 2013-01-24T13:12:32.600 回答