1

我很好奇 - 有没有办法将 JavaScript 中的 onMouseOver 元素添加到 CSS 列表样式图像（项目符号点的图像）。这是我的代码：

<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

4

3 回答 3

1

Lokase 是正确的，没有办法将它添加到项目符号中。但是，您可以做一些事情来模仿这一点。

不要在列表项上使用列表样式图像，而是在列表项中添加一个跨度标记，删除列表样式并将鼠标悬停事件附加到跨度。所以你的列表项看起来像：

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

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

于 2012-04-12T15:00:00.053 回答
1

鼠标事件无法区分子弹点和li，因为它们是一回事。

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

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

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

在这个主题上，您不应该使用内联事件处理程序。您应该通过 javascript 附加事件，从而分离 HTML 和 Javascript。它更容易管理，看起来更好，也更稳定。

传统的事件注册模型和高级注册模型应该让您了解这一点。

第一个例子| 代码

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

第二个例子| 代码

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

第三个例子| 代码

第三个示例使用 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";
            }
        }
    }
}
于 2012-04-12T15:00:56.533 回答
0

很确定鼠标悬停无法区分 LIs 项目符号和 LIs 文本。

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

$('ul.one li').mouseover(function() {
    show_message('my_message');
});
于 2012-04-12T14:31:55.200 回答