3

我知道我的头衔不是最好的，但我尽了最大努力。解释我的问题对我来说有点困难，但我想要的是创建一个在活动元素中具有“三角形”的水平列表。我在下面显示一张图片。 例子

这可能与CSS？我知道我会如何使用 jQuery，但我现在想使用 CSS 而不是 jQuery/Javascript。

我实际上创建了一个小提琴，您可以在下面找到一个链接：http:
//jsfiddle.net/jackbillstrom/3dNcj/

我尝试了一个 javacript 解决方案，但对它不满意，因为我想改用 CSS。我的目标是让您在示例中看到的那个三角形可以“轻松”<li>单击它。这甚至可能还是我在做梦？

4

4 回答 4

9

只需将其添加到 CSS 的底部：

ul#objects li {
    overflow: hidden;
    position: relative;
}
ul#objects li.active:after, ul#objects li:hover:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    box-shadow: 0 0 3px #666;
    transform: rotate(-45deg);
    top:5px;
    right: -8px;
}

JSFiddle 演示。没有 jQuery，你甚至可以免费获得悬停效果。

更新 1：我在这里使用:target了这样的箭头，仅当您单击元素时才会显示：JSFiddle Demo。

更新 2：知道了。CSS 唯一解决方案，其中箭头滑动以跟随您单击的那个：JSFiddle Demo。

更新 3：在这里它已更新，以便在您悬停和单击时箭头滑动。希望你能在代码中看到点击效果需要:target代码以及在你的HTML中添加链接，但如果你只想做:hover效果然后切换到不同的页面，你不需要我添加到您的 HTML 的链接，您只需要将.active类添加到我拥有的 CSS 中:target。希望这是有道理的。JSFiddle 演示。

于 2013-06-26T18:21:09.900 回答
4

这是使用伪元素完成此任务的一种方法。这使用纯 CSS，但依赖于 CSS 3：

#objects > li:hover:after{
    content: ' ';
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 13px;
    position: absolute;
    right: 0px;
    top: 10px;
}
#objects > li:hover{
    position:relative;
}

这是一个演示：http: //jsfiddle.net/wFege/

我一直在绞尽脑汁，但不幸的是，我想不出任何方法可以让这在 badZoke 的答案中融入“滑动”效果。您愿意详细说明为什么不能使用 JS 吗？如果问题只是不想包含 jQuery，您可以使用原生 JS 完成同样的事情。

于 2013-06-26T18:01:56.120 回答
4

这是你想要的吗？

一些基本的 CSS 来创建三角形，

.triangle{
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 

    border-right:10px solid white; 
    position: absolute;
    right: -1px;
    top: 10px;
}

一个简单的 js 使用.animate()来移动指针，

$("li").click(function(){
    $this = $(this);
    $(".triangle").animate({
        top: $this.position().top + "px"
    });
});

测试链接

更新

在支持它的浏览器上使用 CSS3 过渡，JS需要重新插入元素以重新启动动画。

Brentonsrine 有更好的 Pure CSS3 解决方案。

测试链接

于 2013-06-26T17:58:57.400 回答
1

Asad的纯 CSS 解决方案真的很棒。我做了一个类似的事情，它制作了一个水平列表（你提到过）。

http://jsfiddle.net/teAPW/

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid #AAA;
    border-left:none;
    text-align:center;
    line-height:100px;
    background:#DDD;
    color:#999;
    position:relative;
}
ul > li:first-child { border-left:1px solid #AAA; }
ul > li.active { border-right:none; }
ul > li.active + li { margin-left:10px; border-left:1px solid #AAA }
ul > li.active:after {
    position:absolute;
    top:40px;
    right:0;
    border:13px solid;
    border-color:transparent #FFF transparent transparent;
    content:"";
}
于 2013-06-26T18:08:31.833 回答