[Image on top of button][1]
我在使用按钮图像时遇到问题。图像位于标准按钮的顶部，而不是替换它。您可以在图像下方看到原始按钮。不仅如此，我不确定图像本身是否真的可以用作按钮。
情况可能更复杂，因为我刚刚开始学习jQuery，而且我在混淆自己方面做得很好。
任何帮助将不胜感激。
.HTML：
<body>
<div id="container">
<div class="screen">
<div class="title">
<h1 class="shopper">SHOPPER</h1>
<img class="cart" src="images/svg/cart.svg">
</div>
<form name="form" id="shopping-form">
<div class="add-item">
<input type="text" maxlength="30" placeholder="Add item here" id="addForm">
<!-- <button id="add" type="submit">Add</button> -->
<input type="submit" id="blue-add">
<button id="remove" type="button">Remove</button>
</div>
</form>
<form name="form" id="shopping-list">
</form>
</div>
</div>
</body>
.CSS
.green-box {
background : #95C13D;
border-style : Solid;
border-color : #FFFFFF;
border-width : 1px;
width : 24px;
height : 24px;
border-radius : 4px;
}
jQuery
$(document).ready(function() {
$("#add").click(function() {
if ( $.trim( $('#addForm').val() ) === '' ) {
return;
}
else {
addItem();
}
});
//when enter button is pressed
$("#addForm").keypress(function(i){
if(i.which==13){
addItem();
i.preventDefault();
}
});
//add item
function addItem(){
var itemToAdd = $("#addForm").val();
var createItem = '<div class="add-item"><div class="checkcheckcheck"><input type="checkbox" class="checkbox"></div><input type="text" class="item-field" value=" '+itemToAdd + ' "></div>';
$("#shopping-list").append(createItem);
$("#addForm").val("");
$('input.check').change(function(){
$(this).siblings('itemToAdd').toggleClass('strike');
});
}
//remove Item
$("#remove").click(function(){
$("input:checked").closest(".add-item").fadeOut(250);
});
//toggle between line crossed off and on
$('#shopping-list').on('change','input[type=checkbox]',function(){
var myInput = $(this).parent().siblings('input[type=text]');
if ($(this).is(':checked')) {
$(myInput).css('textDecoration','line-through');
}
else{
$(myInput).css('textDecoration','none');
}
});
});
我相信你应该使用<input type="image" />。这将使用图像作为按钮。
阅读更多
再次感谢您的帮助。根据您上面的答案进行了一些研究，我发现添加 - value=" "解决了这个问题。
选项 1：
<input type="image" id="blue-add" name="image" src="http://bit.ly/1R1adHY" width="50">
选项 2：
.HTML：
<input type="submit" id="blue-add" class="image-button">
<button id="remove" type="button" class="image-button">Remove</button>
.CSS：
.image-button {
background: url('http://bit.ly/1MpWUex');
background-repeat: no-repeat;
cursor:pointer;
border:none;
width:100px;
height:45px;
font-weight: bold;
}
.image-button:hover {
//you can change image
}
.image-button:active {
//you can change image
}