如何更改可点击图像的ol项目符号

Question

我订购了有序列表：

<ol>
    <li>Text1</li>
    <li>Text2</li>
</ol>

，我想替换可点击图像的项目符号。我知道如何替换图像的项目符号，但我需要可点击的图像。

我目前的实施：

HTML：

<ol>
    <li>
        <div class="button speaker"></div>
        Text1
    </li>
    <li>
        <div class="button speaker"></div>
        Text2
    </li>
</ol> 

的CSS：

.button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    left: -30px;
    top: 25px;
    height: 25px;
    width: 25px;
}

.speaker {
    background-image: url(../images/navbuttons/btn_speaker.png);
} 

现在的样子：

我想要的是什么：

IE 9,10,11个错误：

它在FireFox和Chrome中运行，但在IE中无效。此外，我正在寻找一个简单而有用的解决方案。

Demo

Answer 1

我将div换成了一个跨度（虽然如果它可以点击，锚链接可能会更好）

JSFiddle Demo

<强> HTML

<ol>
    <li>
        <span class="button speaker"></span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem dolores magnam labore voluptate vero corporis pariatur neque temporibus magni soluta commodi molestias ducimus explicabo minima!
    </li>
    <li>
        <span class="button speaker"></span>
        Text2
    </li>
</ol

  

<强> CSS

li {
    list-style: none;
    line-height:25px;
    margin-bottom: 10px;
    padding: 0;
    text-indent: -30px;
}

.button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    height: 25px;
    width: 25px;
    background-color: red;
    display: inline-block;
    vertical-align: middle;
}

.speaker {
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-10.jpg);
}

Answer 2

要删除IE中的数字，只需添加css：

ol{
    list-style-type: none;
}

要使图像可点击，请更改html，如下所示：

<li>
    <a href="#">
        <div class="button speaker"></div>
    </a>
    Text1
</li>

每个李。 JsFIDDLE Sample

或者您可以使用js：

$('.speaker').unbind('click').click(function(){
window.location = 'http://stackoverflow.com'; // as example
return false;

}）;

Sample

Answer 3

我已将ol添加到样式中，并使用CSS添加图像和HTML以使图像成为链接。

<强> HTML

<a href="#"><ol></a>
<li>
    <div class="button speaker"></div>
    Text1
</li>
<li>
    <div class="button speaker"></div>
    Text2
</li>
</ol>

<强> CSS

.button {
cursor: pointer;
background-repeat: no-repeat;
background-position: center center;
position: relative;
left: -30px;
top: 25px;
height: 25px;
width: 25px;
}

.speaker {
background-image: url(../images/navbuttons/btn_speaker.png);
} 

ol
{
list-style-image("img src");
}