css3是元素不可见,SVG CSS3从其他元素悬停显示和隐藏元素

鉴于下面的SVG,我试图使用CSS来允许用户将鼠标悬停在中的分类元素g#Main_Layer中,以取消隐藏#Hover_Panels中无关的g元素。请看下图:SVG CSS3从其他元素悬停显示和隐藏元素

height="1569.2px" viewBox="0 0 1280 1569.2" style="enable-background:new 0 0 1280 1569.2;" xml:space="preserve">

text{font-family:'Lato';font-weight:300;}

#Hover_Text {

text-transform: uppercase;

}

.st0{fill:#404041;}

.st1{font-family:'Lato';font-weight:300;}

.st5{font-family:'Lato';font-weight:400;}

.st6{font-size:20px;}

.st7{fill:none;stroke:#5880AC;stroke-width:1.073;}

.st22{display:none;}

.st23{display:inline;fill:#016699;}

.st24{font-size:26.44px;}

.hovertext {

cursor: pointer;

}

.hovertext:hover {

font-weight: bold;

}

.hovertext:hover + #Hidden_Text {

display: block;

}

hover

HOVER TEXT

Default Text

Hidden Text

的问题是,我不完全在(我们的设计师提供的插图产生多数民众赞成)的XML布局的太多的控制,以及原因,我希望我能在这里讨论,我们不能用JavaScript来完成这种效果。

如何在使用CSS时悬停在.hovertext元素上,将display: block添加到#Hidden_Text元素,并隐藏#Default_Text元素?

谢谢!

+0

只有CSS才能达到此目的 - 您可以在悬停时更改子元素的状态,而不是父级或兄弟级别。 –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值