将:hover应用于多个#id [英] Apply :hover to multiple #id

问题描述

如何将:hover属性应用于多个html元素的ID(均与我要悬停的元素不同)?用英语表达，我的程序看起来像:如果我将鼠标悬停在#item1上，请隐藏#item2和#item3和#item4."(因此，我可以继续如果我将鼠标悬停在#item2上，则隐藏#item1和#item5"等).

How to apply a :hover property to multiple html elements' IDs (all different from the one I am hovering over)? Formulated in english, my program would look like : "If I am hovering over #item1, hide #item2 and #item3 and #item4." (So then I can go on "And if I am hovering over #item2, hide #item1 and #item5" etc.)

对于CSS之类的东西:

So for a CSS like :

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

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

How can I add more items to #item2 ? I didn't find the answer in the css tutorials or forums I have read... And tried unsuccessfully things like

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

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

But then the property only applies to the last item I mentioned. Or :

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

但是它仅适用于第一个.

But then it only applies to the first one.

如何?

推荐答案

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

You can use wildcard expression selector in your css to match multiple similar ids names. Example below:

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

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

然后为您检查它:

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

更新:已被接受的答案:

UPDATE: The answer that had been accepted:

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:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！