鍍金池/ 問答/HTML/ css中hover的問題

css中hover的問題

現(xiàn)在有一個(gè)嵌套的結(jié)構(gòu)

<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>

我想實(shí)現(xiàn)的效果是經(jīng)過哪個(gè)元素哪個(gè)元素就有hover效果，實(shí)際情況是當(dāng)hover到子元素時(shí)，父元素也會(huì)觸發(fā)hover效果，有點(diǎn)類似js中的冒泡

clipboard.png

請(qǐng)問有沒有css的解決方式呢？

注：js可以實(shí)現(xiàn)，不需要js實(shí)現(xiàn)方法，謝謝

下面是js實(shí)現(xiàn)demo
https://codepen.io/xboxyan/pe...

回答
編輯回答
萌面人

div:hover{ outline:2px dashed rebeccapurple}意思不就是給所有的div加個(gè)hover效果嗎？
如果要具體到每個(gè)子對(duì)象可以通過加個(gè)類來實(shí)現(xiàn)啊
e.g.
div.box-3:hover{ outline:2px dashed rebeccapurple}

2017年3月8日 00:37
編輯回答
涼汐

如果是你這種 html 結(jié)構(gòu)是不可能的。

不過可以把結(jié)構(gòu)改一下，比如:

<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 用各種定位布局的方法來模擬嵌套關(guān)系，之后各自加自己的 hover 效果即可。

鏈接描述

2017年11月10日 05:59
編輯回答
悶油瓶

這個(gè)確實(shí)有點(diǎn)難

2017年10月19日 14:01