我的问题如下:
这是我的HTML代码的一部分:
<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
<input type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
<input type='hidden' name='logged' value='logged'>
</form>
Run Code Online (Sandbox Code Playgroud)
不,我想在css的帮助下设计按钮.这是代码:
a.auftragaufgeben {
display: block;
background-image: url(AuftragAufgeben.png);
width: 467px;
height: 104px;
}
a.auftragaufgeben:hover {
background-image: url(AuftragAufgeben_Hover.png);
}
Run Code Online (Sandbox Code Playgroud)
我发现按钮标记中的类声明应该有效,例如:
<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
<input class="auftragaufgeben" type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
<input type='hidden' name='logged' value='logged'>
</form>
Run Code Online (Sandbox Code Playgroud)
但这并没有改变任何事情.如何将按钮的布局更改为我在CSS部分中声明的图片?或者,当我点击图片时,是否有另一种方式来启动表单?
亲切的问候
在你的css中,代码a.auftragaufgeben和a.auftragaufgeben:hover用于设置链接元素的样式,而不是按钮.
尝试
.auftragaufgeben {
display: block;
background-image: url(AuftragAufgeben.png);
width: 467px;
height: 104px;
}
.auftragaufgeben:hover {
background-image: url(AuftragAufgeben_Hover.png);
}
Run Code Online (Sandbox Code Playgroud)
UPDATE
您的最终HTML代码应如下所示:
<html>
<head>
<style>
.auftragaufgeben {
display: block;
background-image: url(AuftragAufgeben.png);
width: 467px;
height: 104px;
}
.auftragaufgeben:hover {
background-image: url(AuftragAufgeben_Hover.png);
}
</style>
</head>
<body>
<form method='GET' name='auftragaufgeben' action='AuftragAufgeben'>
<input class="auftragaufgeben" type='submit' name='auftragaufgeben2' value='Auftrag aufgeben'>
<input type='hidden' name='logged' value='logged'>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)