Question

如何将：hover属性应用于多个html元素的ID（均与我要悬停的元素不同）？用英语表达，我的程序看起来像：“如果我将鼠标悬停在＃item1上，请隐藏＃item2和＃item3和＃item4。” （因此，我可以继续“如果我将鼠标悬停在＃item2上，则隐藏＃item1和＃item5”等）。

对于CSS这样的

 #generalID #item1:hover+#item2 {
 visibility:hidden;
}

如何向＃item2添加更多项目？我在已读过的CSS教程或论坛中找不到答案...并且尝试了

之类的操作，但未成功

 #generalID #item1:hover+#item2+#item3 {
 visibility:hidden;
}

但是该属性仅适用于我提到的最后一项。或者：

 #generalID #item1:hover+#item2 {
 visibility:hidden;
}
 #generalID #item1:hover+#item3 {
 visibility:hidden;
}

但是它仅适用于第一个。

如何？

Answer 1

了解HTML非常有用。

+组合器意味着#item2必须紧接#item1之后。这就是#item3，#item4和#item5从未应用任何内容的原因，因为（我认为）#item2元素始终位于两者之间。

您可能希望改用~组合器，该组合器与要在悬停的元素之后出现的其他任何元素相匹配。

因此，要么您编写了很多CSS：

#generalID #item1:hover ~ #item2, #generalID #item1:hover ~ #item3, #generalID #item1:hover ~ #item4, #generalID #item1:hover ~ #item5 { visibility: hidden; }

您可以使用Sass或Stylus之类的CSS预处理器来简化编写工作：

#generalID #item1:hover { & ~ #item2, & ~ #item3, & ~ #item4, & ~ #item5 { visibility: hidden; } }

或者您使用通配符，了解它们具有的support limitations：

#generalID #item1:hover ~ [id^='item'] { visibility: hidden; }

但是，即使从+切换到~，也无法编写可能悬停#item1时隐藏#item2的CSS选择器，因为（我假设）#item1在之前 #item2。

为了获得最大的兼容性，您必须编写JavaScript（使用jQuery）：

$("#generalID > *").hover(function(){ $(this).siblings().css("visibility", "hidden"); }, function(){ $(this).siblings().css("visibility", "initial"); });

或者，重新考虑您在HTML中的方法，使编写CSS选择器更为舒适。

Answer 2

您可能需要为此使用jQuery：

if($('#item1').is(":hover"))
{
    $('#item2').css("visibility", "hidden");
};

Answer 3

您可以在CSS中使用通配符表达式选择器来匹配多个相似的ID名称。下面的示例：

div {
   background: red;  
   width: 50px;
   height: 100px;
   float: left;
   margin-right: 5px;
}

div[id^='item']:hover {
  background: blue;
}

然后为您检查它：

https://jsfiddle.net/k5t2jxog/3/

更新：已被接受的答案：

HTML：

<div id="item1" data-hide-on-hover="2,5" data-hide-enable>
</div>
<div id="item2">
</div>
<div id="item3">
</div>
<div id="item4">
</div>
<div id="item5" data-hide-on-hover="1,3" data-hide-enable>
</div>
<div id="item6">
</div>

JavaScript：

var elements = document.querySelectorAll('[data-hide-enable]');

elements.forEach(function(element) {

    // add on hover effects
    element.addEventListener("mouseover", function(element) {
        var elementsIdsToHide = element.target.getAttribute("data-hide-on-hover").trim().split(',');

        var cssSelector = elementsIdsToHide.map(function(item) {
            return "#item" + item;
        });

        var elementsToHide = document.querySelectorAll(cssSelector.join(","));

        elementsToHide.forEach(function(elemToHide) {
            elemToHide.setAttribute("style", "opacity: 0")
        });

    })

    element.addEventListener("mouseleave", function(element) {
        console.log(document.querySelectorAll("[id^='item']"));
        var elements = document.querySelectorAll("[id^='item']");

        elements.forEach(function(elem) {
            elem.setAttribute("style", "opacity: 1");
        });
    })

})

将：hover应用于多个#id

3 个答案: