Question

我很好奇 - 有没有办法将JavaScript中的onMouseOver元素添加到CSS list-style-image（子弹点的图像）。这是我的代码：

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

这与此相互作用：

<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

Answer 1

Lokase是正确的，没有办法将它添加到子弹中。但是，你可以做些什么来模仿这个。

不是在list-item上使用list-style-image，而是在list-item中添加span标记，删除list-style并将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>

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

Answer 2

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

相反，您应该使用li background + padding替换项目符号，然后添加一个在鼠标悬停时展开/显示的消息容器。

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

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

关于这个问题，你不应该使用inline event handlers。你应该通过javascript附加事件，从而分离HTML和Javascript。它更容易管理，看起来更好，而且更稳定。

traditional event registration model和advanced registration model可以让您在这一点上加快速度。

First example |代码

HTML

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

CSS

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;
}

Second example |代码

HTML

<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>

CSS

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;
}

Third example |代码

第三个示例使用javascript onmouseover / out事件来跟踪消息触发。

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

CSS

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;
}

的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";
            }
        }
    }
}

Answer 3

非常确定鼠标悬停无法区分LI子弹和LI文本。

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

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

onMouseOver JavaScript with CSS list-style-image

3 个答案:

First example |代码

Second example |代码

Third example |代码