Question

我有一个带有一些“li”元素的无序列表。我们的想法是突出当前关注的“li”（onhover）。

使用像这样的代码

li[i].onmouseover = function() {
    this.style.backgroundColor = 'lime';
    this.style.borderLeft='5px solid red';
    this.style.listStyle = 'square';
};

这是一个有效的fiddle

我希望左边框出现在悬停元素上，这是在小提琴中发生的。但这似乎将文本转向了正确的方向。如何摆脱跳跃文本行为？

我的下一个问题是我们可以为ul创建自己的符号吗？目前我在正方形和光盘之间切换。是否有可能在每个“li”上都有花哨的图标？

Answer 1

这是Solution。

HTML：

<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the
DOM is awesome, here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>

JavaScript：

var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
    li[i].onmouseover = function() {
        this.style.backgroundColor = 'lime';
        this.style.borderLeft='5px solid red';
        this.style.listStyle = 'square';
    };
    li[i].onmouseout = function() {
        this.style.backgroundColor = 'white';
        this.style.borderLeft='';
        this.style.listStyle = 'disc';
    };
}

CSS：

ul li {line-height:30px; padding-left: 10px; border-left:5px solid transparent;}
#element {
    background: linear-gradient(top, black 0%, white 100%);
}

希望这有助于。

Answer 2

当您不悬停时，添加相同宽度的透明边框，而不是动态更改样式，请更改className并保留它们所属的样式。

如果你可以使用伪元素更好：悬停（除非你真的需要支持IE .. argh ..）

Answer 3

这是您可以通过css技巧完成的代码将此添加到您的CSS

ul li {line-height:30px; padding-left: 15px; border-left:5px solid white}

它在这里工作正常是小提琴 http://jsfiddle.net/sarfarazdesigner/XNqaV/2/

动态改变UL风格

3 个答案: