css中hover的问题

XboxYan
  • 6.9k

现在有一个嵌套的结构

<style>
  div{ display: inline-block; margin: 50px;}
  .box-3{ width: 200px; height: 200px; background: pink}
  .box-2{ background:rgb(113, 160, 179)}
  .box-1{ background:thistle}
  div:hover{ outline:2px dashed rebeccapurple}
</style>


<div class="box-1">
  <div class="box-2">
    <div class="box-3"></div>
  </div>
</div>

我想实现的效果是经过哪个元素哪个元素就有hover效果,实际情况是当hover到子元素时,父元素也会触发hover效果,有点类似js中的冒泡

clipboard.png

请问有没有css的解决方式呢?

注:js可以实现,不需要js实现方法,谢谢

下面是js实现demo
https://codepen.io/xboxyan/pe...

回复
阅读 1.7k
3 个回答

这个确实有点难

如果是你这种 html 结构是不可能的。

不过可以把结构改一下,比如:

<div class="box-container">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>

然后 box-1 box-2 box-3 用各种定位布局的方法来模拟嵌套关系,之后各自加自己的 hover 效果即可。

链接描述

div:hover{ outline:2px dashed rebeccapurple}意思不就是给所有的div加个hover效果吗?
如果要具体到每个子对象可以通过加个类来实现啊
e.g.
div.box-3:hover{ outline:2px dashed rebeccapurple}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏