仅当使用Java鼠标悬停在文本上时，如何选择列表项

Question

我在运行时在无序列表中创建一个列表项，如下所示：

// Javascript code
var items = document.getElementById("list");

var item = document.createElement("li");
item.className = "ItemClass";
item.innerHTML = "Item";
items.appendChild(item);

document.getElementById('list').addEventListener('click', function (event) {
            if ('LI' != event.target.tagName) return;
            // Call a javascript function here
        }, false);

// Css Code

#list 
{
    font-size: 14px;
    color: #069;
}

#list ul
{
    list-style:none;
}

#list ul li 
{
    padding-bottom: 5px;
}

.ItemClass:link
{
    color: #069;
    text-decoration: none;
}

.ItemClass:visited
{
    color: #069;
    text-decoration: none;
}

.ItemClass:hover
{
    color: #000000;
    font-size: 20px;
    text-decoration: none;
}

我希望能够格式化列表，以便仅当文本直接悬停在项目上时才可以选择/突出显示项目，而不是悬停在其旁边的空白处等时才可以选择/突出显示该项目。 目前可以选择它，并且即使不直接悬停也可以触发javascript事件。 在制作单个应用程序应用程序时，我不希望页面刷新，因此我认为我不能使用a href. 我该如何解决这个问题，谢谢！

Answer 1

默认情况下， UL元素是块级元素。 这意味着它会占用尽可能多的水平空间。 您可以将它设置为某些特定宽度的inline-block （可能是更好的选择，但这取决于您的情况）：

ul {
    display: inline-block;
} 

演示： http : //jsfiddle.net/4ckvLrx5/1/

Answer 2

尝试在列表项中使用标签，并防止执行默认操作

https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault