0

我需要一排链接，每个链接都在一个平行四边形的盒子里。顺便说一句，我正在使用 Divs。我需要每个盒子交替黑/白。我希望每个盒子都有一个独特的悬停颜色。

<div id="bar2">
    <ol>
        <script type="text/javascript">
            for (var i = 0; i < 5; i++)
            {
                document.write("<a href='");
                document.write(chapLink[i]);
                document.write("'><li id='li" + i + "' style='background-color:" + chapCol1[i] + "; color:" + chapCol2[i] + "'>");
                document.write(chapter[i]);
                document.write("</li></a>");

                document.write("<img src='paragram");
                document.write(i+1);
                document.write(".png'>");
            };
        </script>
    </ol>



var chapCol1 = new Array();
chapCol1[0] = 'white';
chapCol1[1] = 'black';
chapCol1[2] = 'white';
chapCol1[3] = 'black';
chapCol1[4] = 'white';

该数组适用于填充每个形状的大部分，但不出所料，它并没有完全覆盖它。这使我假设我需要使用一系列图像，一个用于悬停产生的每种颜色组合。

在此先感谢-希望我的问题很清楚，哈利

4

1 回答 1

1

好的，所以让我尝试通过特征来回答： 对于平行四边形框：如果我理解得很好，您想要交替的黑白块，并且您希望这些块内的文本颜色是唯一的。我不明白您为什么在关闭<li>. 我猜你正试图将平行四边形插入块中，对吧？如果你想<li>根据你的PNG图像来塑造你的形状，我建议你将它用作你的块的背景图像，而不是仅仅在之后插入它。为此，只需写background-image: your_path/your_image.png;在块的样式属性内。您可能需要调整块的大小，因为图像可能会被“剪切”。要调整大小，只需执行以下操作：例如，假设您的图像宽度为 10 像素，高度为 20 像素，并且您希望块与图像具有相同的大小。只需在块的样式属性上写下以下内容：width:10px;height:20px; 但无论如何，我仍然认为我没有完全理解你想要做什么。关于您最后一条评论说您无法填充整个形状：这可能是因为li标签具有默认margin值，并且background-color对边距没有影响。

对于悬停颜色，只需将以下内容添加到您的 div 中： onmouseover='this.style.color="unique_color_here";' onmouseout='this.style.color="standard_color_here";'

希望能帮助到你。如果你能更好地解释你到底想要什么，那就太好了：D 试着解释你所拥有的那些图像到底是什么，以及你想用它们做什么。

于 2013-05-20T09:27:44.190 回答