onMouseOver JavaScript with CSS list-style-image

onMouseOver JavaScript with CSS list-style-image

本文关键字：list-style-image CSS with JavaScript onMouseOver      更新时间：2023-09-26

>我很好奇 - 有没有办法将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

鼠标事件无法区分项目符号点和 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;
}

爪哇语

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

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

不要在列表项上使用列表样式

图像，而是在列表项中添加 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>

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

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

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

$('ul.one li').mouseover(function() {
    show_message('my_message');
});
相关文章：