Question

当我将鼠标悬停在另一个div上时，我想让它显示为div而不是当我有多个div时。我不知道为什么？

码

        <style>

        .hover_show:hover{
            display:block !important;
        }
         .show{
               width:100% !important;
               height: 20px !important;
        }
        .hover_show{
            display:none !important;
        }
        .show:hover + .hover_show{
            display: block !important;
        }
        </style>


        <div class='show'>div2</div>
         <div class='show'>div1</div>
        <div class='hover_show'>
                Content to show
        </div>

在这个片段中，当我将鼠标悬停在div2上时，我想显示div内容。

Answer 1

+ is the adjacent sibling combinator，但在您的示例中.hover_show与您的div2元素相邻。你想要~: the general sibling combinator：

＆＃13;

.hover_show { display: none; }
.hover_show:hover { display: block; }

.show {
    width:100%;
    height: 20px;
}
.show:hover ~ .hover_show { display: block; }

＆＃13;

<div class='show'>div2</div>
<div class='show'>div1</div>
<div class='hover_show'>
    Content to show
</div>

＆＃13;

Read more about CSS combinators

Answer 2

你应该使用general sibling combinator（~）并以这种方式重写你的最后一个选择器：

.show:hover ~ .hover_show {
   ...
}

实际上.show:hover + .hover_show仅在两个元素相邻时（即，.show元素悬停后紧跟一个.hover_show元素）才有效。

如果您在这两者之间有其他元素，那么这不起作用。在您的示例中，如果您悬停第一个元素，则规则将无法应用，因为您在中间有另一个.show元素

一般的兄弟组合代替所有跟随兄弟，而不管它们是否相邻。

Answer 3

试试这个。希望如此解决您的问题

   .show:hover ~ .hover_show{
                    display: block !important;
                }

悬停在多个div上显示一个div

3 个答案: