我正在尝试模仿我在codepen上找到的项目： http://codepen.io/ChynoDeluxe/pen/pJxOQE/
此时我可以创建列表项并删除它们，但是我想将删除按钮变成一个图像，当悬停时它会增加不透明度。但是我无法弄清楚如何将创建的按钮变成图像。理想情况下，我会弄清楚如何使它成为同样的垃圾桶图标，但我希望让图片显示然后我可以从那里去。
我尝试将图片制作背景图片，但没有正确显示。这是我到目前为止所做的：
<!DOCTPYE html>
<html>
<head>
<title>MSL List</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"></script>
<style>
div li input {
margin-right: 10px;
}
#wrapper {
width: 300px;
margin-left: auto;
margin-right: auto;
font: 1em Helvetica, Arial, Sans-serif;
}
#error {
display: none;
background: rgba(237, 28, 36, .7);
color:#fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.1em;
}
#inpt {
background: rgba(31, 41, 51, .9);
color: #fff;
padding: 14px;
text-align: center;
font-size: .9em;
width: 227px;
border: none;
}
#btn {
background: #0066cc;
color: #fff;
font-size: 1.75em;
border: none;
padding: 6px;
width: 45px;
}
input, button {
vertical-align: top;
}
input, button:focus {
outline:none;
}
#iList {
list-style-type: none;
background-color: #fff;
margin: 0 auto;
}
li {
border-top: #E6E6E6 solid 1px;
padding: 12px;
}
.removeBtn {
float: right;
padding: 4px;
margin-top: 2px;
background-image:url("recycle.png");
opacity:.6;
}
</style>
</head>
<body bgcolor="#E6E6E6">
<div id="wrapper">
<div id="error">Please enter an item!</div>
<div id="form-head">
<input type="text" id="inpt" placeholder="What are you looking for?" /><button id="btn">+</button>
</div>
<div id="iList">
</div>
</div>
<script>
function updateItemStatus() { //making the function that updates whether an item should have a line through it or not
var cbId = this.id.replace("cb_", ""); //used to replace "cb_" with "" to remove the _cb part of the string on the focus
var itemText = document.getElementById("item_" + cbId); //gets element (item_minSecMsec)
if (this.checked) { //if an item is checked, bugged
itemText.style.opacity = .25;
itemText.style.textDecoration = "line-through";
} else {
itemText.style.opacity = 1;
itemText.style.textDecoration = "none";
}
};
function deleteItem() {var dbId = this.id.replace("btn_", "");
var delBtn = document.getElementById("li_" + dbId);
delBtn.onclick=function() {
this.parentNode.removeChild(delBtn);
return false;
};
}
function addNewItem(iList, itemText) { //defining a function that acts upon list and itemText to label it with a time stamp
var date = new Date(); //sets date ia variable that sets date to make the time stamp
var id = date.getMilliseconds(); //makes id = milliseconds
var listItem = document.createElement("li"); //creates a list element node
listItem.id = "li_" + id; //gives that node an id of li_minSecMsec
var checkBox = document.createElement("input"); //creates an input node
checkBox.type = "checkbox"; //gives that input node a type of checkbox
checkBox.id = "cb_" + id; //makes the checkbox id cb_minSecMsec
checkBox.onclick = updateItemStatus; //when the checkbox is clicked it runs updateItemStatus function defined above
var span = document.createElement("span"); //creates a span node.
span.id = "item_" + id; //makes span id = item_minSecMsec
span.innerHTML = itemText; //makes the inner text of the span node itemText (which has no further value in this function)
var delBtn = document.createElement("button");
delBtn.setAttribute("class", "removeBtn");
delBtn.id = "btn_" + id;
delBtn.onclick = deleteItem;
listItem.appendChild(checkBox); //append checkbox node to the li node created
listItem.appendChild(span); //append the span node to the li node as well
listItem.appendChild(delBtn);
iList.appendChild(listItem); //add the li node to list parameter (presumably any list in the DOM?)
document.getElementById("inpt").value="";
}
var inItemText = document.getElementById("inpt"); //gets the input text
inItemText.focus(); //makes it the focus
document.getElementById("inpt") //makes enter button run it as if btn was clicked
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("btn").click();
}
});
var btnNew = document.getElementById("btn"); //gets button
btnNew.onclick = function() { //on click the button runs a function that runs the addNewItem function
if (document.getElementById("inpt").value.length < 1) {
document.getElementById("error").style.display="block";
} else {
document.getElementById("error").style.display="none";
var inItemText = document.getElementById("inpt"); //defines inItemText within the function as the input text
var itemText = inItemText.value; //makes new variable of itemText to get the value of what is in the input
addNewItem(document.getElementById("iList"), itemText); //this is where the li node is added to the ul and itemText is set as the text in the input
}
};
</script>
</body>
</html>
Here's how it shows up where the pic should be the buttons on the right.
答案 0 :(得分：0)
这对我有用，现在只在firefox上进行测试，但它应该适用于所有浏览器。
.removeBtn {
height: 25px;
width: 25px;
float: right;
padding: 4px;
margin-top: 2px;
background-size: cover;
background-image:url("http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png");
background-repeat: no-repeat;
opacity:.6;
filter: alpha(opacity=60) /*For IE*/
}
.removeBtn:hover {
height: 25px;
width: 25px;
float: right;
padding: 4px;
margin-top: 2px;
background-size: cover;
background-image:url("http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png");
background-repeat: no-repeat;
opacity:1;
filter: alpha(opacity=100) /*For IE*/
}
您可以通过更改宽度和高度来更改图标的大小，图标应缩放。我从谷歌中随机抓取该图片仅用于测试，所以只需用您自己的路径替换该网址：）