0

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

使用这样的一些代码

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

这是一个工作小提琴

我希望左边框出现在悬停的元素上，这发生在小提琴中。但这似乎使文本向右移动。如何摆脱这种跳跃的文本行为？

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

4

3 回答 3

2

这是解决方案。

的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%);
}

希望这可以帮助。

于 2013-05-15T08:39:25.600 回答
1

不悬停时添加相同宽度的透明边框，另外，不要动态更改样式，只需更改 className 并将样式保留在它们所属的位置。

如果你可以使用伪元素 :hover 就更好了（除非你真的需要支持 IE.. argh..）

于 2013-05-15T08:31:29.687 回答
0

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

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

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

于 2013-05-15T08:30:43.613 回答