让一个 div 出现在悬停在另一个 div 上

2022-01-22 00:00:00 hover html css

我试图让它在您将鼠标悬停在图像上时出现一个小彩色框.我在这里重新创建了场景:http://jsfiddle.net/UaXUS/

I am trying to have it so that a little colored box comes up when you hover over an image.I have recreated the scenario here: http://jsfiddle.net/UaXUS/

当我删除 visibility:hidden 属性时，div 会正确显示，但当我尝试使用悬停部分时不会.关于如何解决这个问题的任何建议?我也试过 display:none 去 display:inline 或 display:block，但没有运气

The div shows up properly when I remove the visibility:hidden attribute, but not when I try to use the hover part. Any suggestions as to how to fix this? I have also tried display:none going to display:inline or display:block, but no luck

推荐答案

替换

#content:hover + #hoverbar{
    visibility:visible;
}

与

#content:hover > #hoverbar{
    visibility:visible;
}

或

#content:hover #hoverbar{
    visibility:visible;
}

加号+"代表兄弟姐妹.在您的情况下， div 是嵌套的.

The plus sign '+' is for siblings. In your case the div is nested.

这里是更新的jsfiddle

相关文章