带CSS列表样式图像的onMouseOver JavaScript

我很好奇——有没有办法在JavaScript中将onMouseOver元素添加到CSS列表样式的图像（用于要点的图像）中。这是我的密码：

<style type="text/css">
ul.one {list-style-image:url('http://fun.resplace.net/Emoticons/Minecraft/Diamond.png');}
</style>

ul.one{列表样式图像：url（'http://fun.resplace.net/Emoticons/Minecraft/Diamond.png');}

与此互动的是：

<ul class="one">
<li class="one"><input type="button"  id="1"onclick="show_prompt()" value="Minestatus" /></li>
<li class="two"><input type="button" id="2" onclick="show_alert()" value="Minecraft Server List" /></li>
<li class="three"><input type="button" id="3" onclick="show_alert1()" value="MCSL" /></li>
</ul>

我想这样，当有人在钻石上移动鼠标时，它会显示除此之外的信息：

<p>Please vote for my server!</p>

请为我的服务器投票

---

另外，这是我正在开发的Minecraft服务器网站投票代码的一部分，以防你想知道这整件事是什么。我想这样，当你滚动其中一个方块时，除了“请为我的服务器投票”，它会显示他们将投票的网站名称。感谢您的帮助，非常感谢：D

非常确定鼠标盖无法区分LIs项目符号和LIs文本

您可以在每个LI上放置一个鼠标盖并弹出一条消息，下面的代码示例基于Jquery，您可以在原始javascript中破解出类似的代码：

$('ul.one li').mouseover(function() {
    show_message('my_message');
});

---

洛卡斯是对的，没有办法把它加到子弹上。但是，你可以做一些事情来模仿这一点

不要在列表项上使用列表样式图像，而是在列表项中添加span标记，删除列表样式并将mouseover事件附加到span。因此，您的列表项如下所示：

<li class="one"><span>Please vote for my server!</span><input type="button"  id="1"onclick="show_prompt()" value="Minestatus" /></li>

请为我的服务器投票 您的CSS将更改为：

<style type="text/css">
ul.one span { background:url('http://fun.resplace.net/Emoticons/Minecraft/Diamond.png') no-repeat left top; display: block; height: 12px; list-style: none; text-indent: -9999px; width: 12px;}
</style>

ul.one span{背景：url（'http://fun.resplace.net/Emoticons/Minecraft/Diamond.png“）不重复左上角；显示：块；高度：12px；列表样式：无；文本缩进：-9999px；宽度：12px；}

---

您必须调整高度和宽度，以符合钻石图像的高度和宽度。并且，必须调整列表项样式，以考虑填充和边距差异，因为实际的项目符号将不再存在。

鼠标事件无法区分项目符号和li，因为它们是同一个

相反，您应该将项目符号替换为li背景+填充，然后添加一个消息容器，该容器在鼠标悬停上展开/显示

或者，您可以为钻石本身制作一个单独的容器，其中包含悬停时显示的消息。当然，消息容器中可以包含您想要的任何内容

这可以在没有任何javascript参与的情况下完成

在这个问题上，你不应该使用。您应该通过javascript附加事件，从而分离HTML和javascript。它更容易管理，看起来更好，更稳定

和应该使你在这一点上加快速度

---

|代码 HTML

---

|代码 HTML

---

|代码 第三个示例使用javascript onmouseover/out事件跟踪消息触发

与第一个示例相同的HTML，只是我在列表中添加了一个id

CSS

Javascript

var eList = document.getElementById("list"),
    eItems = eList.getElementsByTagName("li");

for(i = 0; i < eItems.length; i++){
    eItems[i].onmouseover = function(event){
        var eDivs = this.getElementsByTagName("div");

        for(j = 0; j < eDivs.length; j++){
            if(eDivs[j].className.indexOf("diamond") >= 0){
                if(eDivs[j].className.indexOf("hovering") == -1) eDivs[j].className += " hovering";
            }

            if(eDivs[j].className.indexOf("message") >= 0){
                eDivs[j].style.display = "block";
            }
        }
    };

    eItems[i].onmouseout = function(event){
        var eDivs = this.getElementsByTagName("div");

        for(j = 0; j < eDivs.length; j++){
            if(eDivs[j].className.indexOf("diamond") >= 0){
                if(eDivs[j].className.indexOf("hovering") != -1) eDivs[j].className = eDivs[j].className.replace("hovering", "").replace(" ", "");
            }

            if(eDivs[j].className.indexOf("message") >= 0){
                eDivs[j].style.display = "none";
            }
        }
    }
}

var eList=document.getElementById（“列表”），
eItems=eList.getElementsByTagName（“li”）；
对于（i=0；i=0）{
if（eDivs[j].className.indexOf（“悬停”）==-1）eDivs[j].className+=“悬停”；
}
if（eDivs[j].className.indexOf（“消息”）>=0）{
eDivs[j].style.display=“block”；
}
}
};
eItems[i].onmouseout=函数（事件）{
var eDivs=this.getElementsByTagName（“div”）；
对于（j=0；j=0）{
if（eDivs[j].className.indexOf（“悬停”）！=-1）eDivs[j].className=eDivs[j].className.replace（“悬停”）.replace（“，”）；
}
if（eDivs[j].className.indexOf（“消息”）>=0）{
eDivs[j].style.display=“无”；
}
}
}
}

ul.one {
    list-style: none;
    position: relative;
    width: 200px;
    margin-left: 50px;
}

ul.one li .diamond{
    background: url('http://img835.imageshack.us/img835/6175/shinyn.png') center no-repeat;
    margin-right: 10px;
    position: relative;
    width: 12px;
    height: 13px;
    display: inline-block;
}

ul.one li .diamond:hover{
    background: url('http://img42.imageshack.us/img42/3357/shinyo.png') center no-repeat;
}

ul.one li .diamond:hover > .message{
    display: block;
}

ul.one .message{
    position: absolute;
    background: white;
    border: 1px solid gray;
    margin-top: 5px;
    top: 100%;
    left: -56.5px;
    z-index: 1;
    display: none;
    width: 125px;
}

<ul class="one">
    <li class="one">
        <input type="button"  id="1"onclick="show_prompt()" value="Minestatus" />
        <div class='message'>Please vote for me!</div>
    </li>
    <li class="two">
        <input type="button" id="2" onclick="show_alert()" value="Minecraft Server List" />
        <div class='message'>Please vote for me!</div>
    </li>
    <li class="three">
        <input type="button" id="3" onclick="show_alert1()" value="MCSL" />
        <div class='message'>Please vote for me!</div>
    </li>
</ul>

ul.one {
    list-style: none;
    position: relative;
    width: 200px;
    margin-left: 50px;
}

ul.one li{
    background: url('http://img835.imageshack.us/img835/6175/shinyn.png') left no-repeat;
    padding-left: 20px;
    position: relative;
}

ul.one li:hover{
    background: url('http://img42.imageshack.us/img42/3357/shinyo.png') left no-repeat;
}

ul.one li:hover > .message{
    display: block;
}

ul.one .message{
    position: absolute;
    background: white;
    border: 1px solid gray;
    top: 0;
    left: 100%;
    z-index: 1;
    display: none;
    width: 125px;
}

ul.one {
    list-style: none;
    position: relative;
    width: 200px;
    margin-left: 50px;
}

ul.one li .diamond{
    background: url('http://img835.imageshack.us/img835/6175/shinyn.png') center no-repeat;
    margin-right: 10px;
    position: relative;
    width: 12px;
    height: 13px;
    display: inline-block;
}

ul.one li .hovering{
    background: url('http://img42.imageshack.us/img42/3357/shinyo.png') center no-repeat;
}

ul.one .message{
    position: absolute;
    background: white;
    border: 1px solid gray;
    margin-top: 5px;
    top: 100%;
    left: -56.5px;
    z-index: 1;
    display: none;
    width: 125px;
}

var eList = document.getElementById("list"),
    eItems = eList.getElementsByTagName("li");

for(i = 0; i < eItems.length; i++){
    eItems[i].onmouseover = function(event){
        var eDivs = this.getElementsByTagName("div");

        for(j = 0; j < eDivs.length; j++){
            if(eDivs[j].className.indexOf("diamond") >= 0){
                if(eDivs[j].className.indexOf("hovering") == -1) eDivs[j].className += " hovering";
            }

            if(eDivs[j].className.indexOf("message") >= 0){
                eDivs[j].style.display = "block";
            }
        }
    };

    eItems[i].onmouseout = function(event){
        var eDivs = this.getElementsByTagName("div");

        for(j = 0; j < eDivs.length; j++){
            if(eDivs[j].className.indexOf("diamond") >= 0){
                if(eDivs[j].className.indexOf("hovering") != -1) eDivs[j].className = eDivs[j].className.replace("hovering", "").replace(" ", "");
            }

            if(eDivs[j].className.indexOf("message") >= 0){
                eDivs[j].style.display = "none";
            }
        }
    }
}