Fiddle

Question

我试图让一个列表影响另一个列表...我已经做了一个例子，试图弄清楚这个......我只是被卡住了！

基本上我有一个项目列表和一个图像列表。我希望有一个不同的图像显示，因为每个项目都突出显示。这是我的小提琴模型：http://jsfiddle.net/t9hznk0w/

基本上Container是主要的div ...然后是项目列表，然后是图像的另一个占位符列表。在这个例子中，我只是试图证明概念（我稍后会通过改变不透明度来做到这一点）但是我似乎无法在悬停时获得第一个列表项来影响第二个列表项。在我的例子中，我只是想改变颜色并加粗第二个元素。

如对此有任何帮助，将不胜感激！

HTML：

<div id="container">
    <ul id="container1">
        <li class="itm1">Item 1</li>
        <li class="itm2">Item 2</li>
        <li class="itm3">Item 3</li>
    </ul>
    <ul id="container2">
        <li class="img1">ITEM 1 IMAGE</li>
        <li class="img2">ITEM 2 IMAGE</li>
        <li class="img3">ITEM 3 IMAGE</li>
    </ul>
</div>

CSS：

.itm1:hover ~ .img1 {
font-weight: bold;
color: red;
}
.img1:hover {
color: green;
}
.itm1:hover {
color: yellow;
}

我试过了+＆gt; 〜和各种组合仍然没有成功......请帮忙！

Answer 1

这是无法做到的，因为您尝试定位的两个元素既不是兄弟也不是后代，并且CSS中没有父选择器来遍历DOM。您可以使用.index()

在JS中相对轻松地完成此操作

$("ul#container1").find("li").hover(function(){
   var index = $(this).index(); //index position of hovered li
   $("#container2").find("li").eq(index).toggleClass("active"); //find same position in other ul
});

FIDDLE

Answer 2

由于您只请求了HTML和CSS，因此我更改了标记以获得您的意图。 CSS中缺少父选择器会使您的请求无法进行该标记。

＆＃13;

.itm1:hover ~ .img1 {
    color: red;
}
.itm2:hover ~ .img2 {
    color: red;
}
.itm3:hover ~ .img3 {
    color: red;
}
.img1:hover {
    color: green;
}
#container ul li:hover {
    color: red
}

＆＃13;

<div id="container">
    <ul id="container1">
        <li class="itm1">Item 1</li>
        <li class="itm2">Item 2</li>
        <li class="itm3">Item 3</li>
        <br/>
        <li class="img1 container2">THIS IS ITEM 1</li>
        <li class="img2 container2">THIS IS ITEM 2</li>
        <li class="img3 container2">THIS IS ITEM 3</li>
    </ul>
</div>

＆＃13;

这是一个仅限HTML和CSS的解决方案，不确定它是否符合您的要求。

Fiddle

Answer 3

听起来您想通过过滤器选项隐藏和显示项目元素。隐藏与隐藏所选项目不匹配的项目。同位素将是最佳解决方案http://isotope.metafizzy.co/filtering.html。我会选择fitRows选项，因为它适用于具有相同高度的物品。而且动画非常酷而且很流畅。

有关安装的最佳分步帮助，请查看http://bootstrapwp.com/?ref=14

如何让css影响同一容器中的其他div

3 个答案:

Fiddle