Question

我需要一排链接，每个链接都是一个平行四边形的框。我顺便使用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';

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

提前致谢 - 希望我的问题很明确，哈利

Answer 1

好的，让我尝试按功能回答：对于平行四边形盒子：如果我理解得很好，你想要黑色和白色的交替块，你希望这些块内的文本颜色是唯一的。我不明白为什么在关闭<li>后尝试插入图像。我猜你试图将平行四边形的形状插入块中，对吧？如果您希望根据PNG图像对<li>进行整形，我建议您将其用作块的backgorund图像，而不是仅在之后插入。为此，只需在块的样式属性中写入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 试着解释一下你的图像是什么，以及你想用它们做些什么。

悬停图像Alpha数组

1 个答案: