javascript - 如何仅在使用 Javascript 将鼠标悬停在文本上时选择列表项

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 元素是 block 级元素。这意味着它会占用尽可能多的水平空间。你要么让它 inline-block 设置一些特定的宽度(可能是更好的选择，但这取决于你的情况):

ul {
    display: inline-block;
} 

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