jquery - 图像横幅旋转箭头

Question

我正在尝试创建一个图像横幅旋转，当选择 5 个横幅中的任何一个时，该旋转将具有“箭头”覆盖。我模拟了我的 div，但不确定如何进行。我是否应该将 Banner1-Banner5 描述作为未排序的列表和列表项并更改样式？或者像我在下面所做的那样将它们保留为单独的 div？我也不清楚在选择某个横幅描述时如何制作“箭头”叠加层。下面的图片显示了最终横幅的显示方式。我的框架代码也在下面。

    <!-- hp banner start -->
    <div id="hp-banner">

    <div id="hp-banner-left">
    BANNER IMAGE
    </div>

    <div id="banner-right">
    <div id="banner-right-1">
    BANNER 1 DESCRIPTION
    </div>

    <div id="banner-right-2">
    BANNER 2 DESCRIPTION
    </div>

    <div id="banner-right-3">
    BANNER 3 DESCRIPTION
    </div>

    <div id="banner-right-4">
    BANNER 4 DESCRIPTION
    </div>

    <div id="banner-right-5">
    BANNER 5 DESCRIPTION
    </div>


    </div>


    <!-- hp banner end -->
    </div>

Answer 1

虽然我同意 Billy Moat 的观点，但我认为通过一些额外的知识来了解 css 可以做什么是很好的。

右边的菜单绝对应该是一个列表，因为它看起来就是这个样子。

我想这其中最难的部分是箭头。使用 css 实际上非常简单。

http://jsfiddle.net/Lddxooum/

HTML

<ul>
    <li>banner 1</li>
    <li>banner 2</li>
    <li>banner 3</li>
    <li>banner 4</li>
    <li>banner 5</li>
</ul>

CSS

div {
    float:left;
    width:200px;
    height:100px;
    background:orange;
}

ul {
    float:left;
    margin:0;
    padding:0;
}

li {
    list-style:none;
    line-height:20px;
    background:gray;
    position:relative;
}

li:hover {
    color:white;
    background:blue;
}

li:hover:before {
    content:'';
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:20px solid blue;
    position:absolute;
    right:100%;
    top:0;
}

最后一个 css block 是负责创建箭头的 block 。您可以仅使用 html 和 css 制作许多有趣的形状。

https://css-tricks.com/examples/ShapesOfCSS/#triangle-up