首页 文章

应用：悬停到多个#id [暂停]

提问于
浏览 次
0

如何将a：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;
}

但那时它只适用于第一个 .

如何？

html css hover

4 回答

  • 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;
}

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

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

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

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

    回复于
  • 0

    您可以在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");
        });
    })

})
    回复于
  • 0
    <diV>
    <div class="js-hover-item">Item 1</div>
    <div class="js-hover-item">Item 2</div>
    <div class="js-hover-item">Item 3</div>
    <div class="js-hover-item">Item 4</div>
</diV>
<style>
    .js-hover-item--inactive {
        visibility: hidden;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    jQuery(function ($) {
        const inActiveClass = 'js-hover-item--inactive';

        $('.js-hover-item').hover(function () {
            const hoveredItem = $(this);
            $('.js-hover-item').each(function () {
                const item = $(this);

                hoveredItem.is(item)
                    ? item.removeClass(inActiveClass)
                    : item.addClass(inActiveClass);
            });
        }, function () {
            $('.js-hover-item').each(function () {
                const item = $(this);

                item.removeClass(inActiveClass)
            });
        });
    })
</script>

    请考虑使用特殊的js类 . 而不是通过id选择器执行任务 . 我建议考虑使用class =“js-hover-item”;

    原因是 - 删除重复的CSS选择器，如 #generalID #item1:hover+#item2 #generalID #item1:hover+#item3 ，等等......会有很多代码，它会造成一堆混乱，以提高可读性 .

    在这种情况下，您可以在任何元素上使用'js-hover-item'，而不依赖于您的HTML结构 .

    回复于
  • 1

    您可能需要使用jQuery：

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

相关问题